'How to invert text color according to what's behind it? (not only background) [duplicate]

All the solutions I have found only work inverting the color of the text element, according to the color of the background. I want the color of the text to be inverted according to whatever is placed behind it (images, videos, 3D models etc.).

I have some sticky elements in my page, I want their color to change dynamically as the user is scrolling to the inverted color of whatever is displayed behind the text at that moment.

Thanks.

cssfrontendweb-frontendcss-color


Solution 1:[1]

I thought mix-blend-mode: difference; would do just that. ??

#bg {
  background-image:url(https://thumbs.dreamstime.com/b/beautiful-multicolored-bokeh-lights-holiday-glitter-background-christmas-new-year-birthday-celebration-high-resolution-image-133585052.jpg);
}
#test {
  font-size:20vw;
  color:#FFF;
  mix-blend-mode: difference;
}
<div id="bg">
<div id="test">testing</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kip

Related Questions