I'm trying to change text color based on the background color. Let's say I have background with black stripes, and the overall background is white, I need the text black on white background and white text on black background.
Is there a way to do it, only with CSS? If no, what are the best practices to do this. See the HTML bellow:
<p>Aliquam dolor nunc, auctor non dolor vitae, eleifend fringilla felis. Praesent dapibus erat ut nisl commodo ullamcorper.</p>
<p>Morbi eget urna augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Nullam laoreet auctor urna at eleifend. Proin venenatis hendrerit mauris, mollis malesuada lorem consectetur et. Aliquam sed iaculis augue.</p>
<p>Donec viverra ex in lectus luctus porttitor.</p>
background-size: 480px 480px;
You can achieve this effect using the
mix-blend-mode property. I must warn you, support is non-existent in IE. To do what you want to do, you need to have all elements overlap, like you already have, then set the
<span> or whatever element you're using for the text to
If you want to use an actual color, instead of just black and white, another element with that color is required. It needs to cover the entire area you want the color applied to, and have it's
mix-blend-mode set to
Here's the catch though, the elements should not be inside each other. The text needs to be above the background elements, but not INSIDE them. I suggest a wrapper
<div> to solve this issue.