黑文本 - 白色,当在黑背景时

Question

我正在创造一个玩家可以移动的世界游戏.

还有一些GUI(eq,stats ..),其元素没有背景(背景是游戏世界).

这些元素有黑色文字颜色,我的问题是:

当背景为黑色时,此文本是否可以变为白色,或者此文本是否总是与背景颜色相反？

Answer 1

有一个 css 属性可以完全满足您的需求，但支持有点有限（没有 IE/Edge）。

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

CSSmix-blend-mode属性描述了元素的内容应如何与元素的直接父元素和元素的背景的内容混合。

相关例子：

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>

替代方案（为了更广泛的支持）将是@Rourinbox-shadow发布的技巧（可以与 结合起来以获得最佳结果），或者使用元素重复 CSS 效果并以编程方式应用效果（但这涉及更多，并且具有更重的性能）。mix-blend-modecanvas