Menu
Is there a CSS property to invert the font-color depending on the background-color like this picture?
707
CSS allows you to invert the color of an HTML element by using the invert() CSS function that you can pass to the filter property. Because the default color of the text is black, the color is inverted into white with filter: invert(100%) syntax.
Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.
There is a CSS property called mix-blend-mode, but it's not supported by IE. I recommend using pseudo elements. If you like to support IE6 and IE7 you can also use two DIVs instead of pseudo elements.
.inverted-bar { position: relative; } .inverted-bar:before, .inverted-bar:after { padding: 10px 0; text-indent: 10px; position: absolute; white-space: nowrap; overflow: hidden; content: attr(data-content); } .inverted-bar:before { background-color: aqua; color: red; width: 100%; } .inverted-bar:after { background-color: red; color: aqua; width: 20%; }<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
