javascript - 如何更改照片中文字的颜色？

Question

有一个带有照片和特定标题的 block 。滚动时，该文本会更改其位置(变换:translate3d)。当符号出现在照片上时，有必要更改它们的颜色。

也许有人遇到过这种情况并可以提供帮助？我附上了一张照片，以便更好地了解该任务

Answer 1

如果你想要纯CSS解决方案，可以使用 mix-blend-mode 。请注意它可以在哪些浏览器中使用。

它将决定一个元素的内容应如何与该元素的直接父元素的内容混合。

:root {
  --main-color: white;
  --secondary-color: black;
}

#app {
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(-45deg, var(--main-color), var(--main-color) 30px, var(--secondary-color) 30px, var(--secondary-color) 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blend {
  font-family: sans-serif;
  font-size: 2em;
  color: white;
  mix-blend-mode: difference;
}

<div id="app">
  <div class="blend">Hello world, how are you?</div>
</div>