如何根据背后的内容反转文字颜色? (不仅是背景)

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

我找到的所有解决方案都只能根据背景颜色反转文本元素的颜色。我希望文本的颜色根据放置在它后面的任何内容(图像、视频、3D 模型等)进行反转。

我的页面中有一些粘性元素,我希望它们的颜色随着用户滚动到当时显示在文本后面的任何内容的反转颜色而动态变化。

谢谢。

我认为 mix-blend-mode: difference; 会那样做。 ✌️

#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>