黑色文本 - 当在黑色背景上的白色 [英] Black text - white when on black background

问题描述

还有一些图形用户界面（eq，stats ..），它具有没有背景的元素（eq，stats ..）背景是游戏世界）。

这些元素有黑色的文字颜色，我的问题是：

当background'll变黑时，文本变为白色，或者这个文本可能总是与背景相反的颜色？ 是一个css属性，完全符合您的需求，但支持有点有限 （ no IE / Edge ）。

mix-blend-mode 并使用差异会得到与您需要的结果非常相似的结果。 （支持更多模式）。

混合混合模式 CSS属性描述了元素的内容应该如何混合元素的直接父元素和元素的背景的内容。

相关示例：

html，body {height：100％}。身高：100％;背景：url（'http://www.intrawallpaper.com/static/images/rainbow_texture679.jpg'）0％50％不重复; animation：moveBG 10s linear infinite;}。gui {color：grey;填充：25像素;行高：1.4;混合混合模式：差异;} @关键帧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栖息地morbi tristique senectus et netus et malesuada fames ac turpis egestas。 Duis ornare metus sed justo pulvinar dapibus。 Cras posuere leo quis semper lacinia。只需将药丸放入药瓶中即可。 Integer est velit，congue eget quam nec，feugiat malesuada nulla。 Sed nisi lacus，pharetra mattis dapibus ac，hendrerit ac quam。 Nulla facilisi。 < / div>< / div>  

$ b

---

这个替代（用于更广泛的支持）将会是 box-shadow 这个技巧，@Rourin 发布（可以与 mix-blend-mode 结合使用最好的结果），或者使用 canvas 元素重复CSS效果并以编程方式应用效果（，但涉及更多，性能更强）。

I'm creating a game with world where player can move.

And there is some GUI (eq, stats..) which has elements with no background (background is game world).

These elements have black text color, and my question is:

Can this text change to white when background'll be black, or can this text'll be always opposite color than background?

解决方案

There is a css property that does exactly what you want, but support is a bit limited (no IE/Edge).

It is mix-blend-mode and using a value of difference yields very similar results to what you need. (many more modes supported).

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.

Relevant example:

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>

---

Alternatives to this (for wider support) would be the box-shadow trick that @Rourin posted (which could be combined with the mix-blend-mode for the best results), or repeating the CSS effect using a canvas element and applying the effect programmatically (but this is quite more involved and with heavier performance).

这篇关于黑色文本 - 当在黑色背景上的白色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！