javascript - 黑色文本 - 黑色背景时为白色

Question

<分区>

Answer 1

有一个 css 属性可以完全满足您的需求，但是 support is a bit limited (没有 IE/Edge)。

是mix-blend-mode并使用 difference 的值会产生与您需要的结果非常相似的结果。 (支持更多模式)。

The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.

相关示例:

html, body{height:100%}
.game {
  width: 100%;
  height: 100%;
  background:url('http://www.intrawallpaper.com/static/images/rainbow_texture679.jpg') 0% 50% no-repeat;
animation: moveBG 10s linear infinite;
}
.gui {
  color:grey;
  padding:25px;
  line-height:1.4;
  mix-blend-mode: difference;
}
@keyframes moveBG {
  0% {background-position: 0% 50%;}
 25% {background-position: 50% 0%;}
 50% {background-position: 100% 50%;}
 75% {background-position: 50% 100%;}
100% {background-position: 0% 50%;}
}

<div class="game">
  <div class="gui">
  Ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ornare metus sed justo pulvinar dapibus. Cras posuere leo quis semper lacinia. Pellentesque vitae ligula ut magna interdum tincidunt. Integer est velit, congue eget quam nec, feugiat malesuada nulla. Sed nisi lacus, pharetra mattis dapibus ac, hendrerit ac quam. Nulla facilisi.
  </div>
</div>

---

替代方案(获得更广泛的支持)将是 box-shadow 技巧 @Rourin已发布(可以与 mix-blend-mode 结合使用以获得最佳效果)，或者使用 canvas 元素重复 CSS 效果，并且以编程方式应用效果(但这相当复杂并且性能更高)。