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

Question

有一个带有照片和特定标题的图块。滚动时，此文本更改其位置（转换：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>