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>