Utilities for controlling an element's font-color opacity.
The ability to control an element's color is only provided as a class. We do not provide variables to control this. The text opacity class resets the font color's alpha channel CSS variable value.
Use d-fco{n} to change a font-color's opacity. You can also change font-color's opacity on :hover, :focus, :focus-visible by using the respective h:d-fco{n}, f:d-fco{n}, fv:d-fco{n} prefixes.
<pclass="d-fc-critical">The quick brown fox jumps over the lazy dog.</p><pclass="d-fc-critical d-fco99">The quick brown fox jumps over the lazy dog.</p><pclass="d-fc-critical d-fco95">The quick brown fox jumps over the lazy dog.</p><pclass="d-fc-critical d-fco90">The quick brown fox jumps over the lazy dog.</p><pclass="d-fc-critical d-fco75">The quick brown fox jumps over the lazy dog.</p><pclass="d-fc-critical d-fco50">The quick brown fox jumps over the lazy dog.</p><pclass="d-fc-critical d-fco25">The quick brown fox jumps over the lazy dog.</p><pclass="d-fc-critical d-fco10">The quick brown fox jumps over the lazy dog.</p><pclass="d-fc-critical d-fco0">The quick brown fox jumps over the lazy dog.</p>
Text opacity CSS Utilities won't be inherited by its children. A font-color utility class must be present on the same element to work.
Text opacity utility classes don't inherit colors.
<!-- This won't work --><divclass="d-fc-critical"><p>The quick brown fox jumps over the lazy dog.</p><pclass="d-fco50">The quick brown fox jumps over the lazy dog.</p></div>
Apply each utility class to the same element
<!-- This will --><divclass="d-fc-critical"><p>The quick brown fox jumps over the lazy dog.</p><pclass="d-fc-critical d-fco50">The quick brown fox jumps over the lazy dog.</p></div>