黑色文本 - 黑色背景上的白色 [关闭]

Question

我正在创建一个玩家可以移动的游戏。

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

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

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

Answer 1

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

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

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

相关示例：

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>

---

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

Answer 2

您可以使用 4 text-shadows 为黑色文本赋予白色轮廓。

工作示例：

.black {
display:inline-block;
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100px;
height: 140px;
background-color: rgb(0,0,0);
transform: translateX(420px);
animation: slideLeft 6s linear infinite;
}

@keyframes slideLeft {
  0% {transform: translateX(420px);}
 50% {transform: translateX(0);}
100% {transform: translateX(420px);}
}

p {
position: relative;
z-index: 6;
font-size: 20px;
text-shadow:
1px 1px 1px rgb(255,255,255),
1px -1px 1px rgb(255,255,255),
-1px -1px 1px rgb(255,255,255),
-1px 1px 1px rgb(255,255,255);}
}

<p>This is Paragraph 1 - the text is black but it has a white outline.</p>
<p>This is Paragraph 2 - the text is black but it has a white outline.</p>
<p>This is Paragraph 3 - the text is black but it has a white outline.</p>

<div class="black">
</div>

Answer 3

最好不要倒置，因为倒置的颜色也可能非常难以辨认，或者只是让眼睛非常疲劳。

这是一个非常酷的算法，可以根据背景自动选择最清晰的文本颜色。

您可以在绘制框架和文本时在游戏循环中使用此示例。

var c = document.getElementById('container');

var colourIsLight = function (r, g, b) {
  
  // Counting the perceptive luminance
  // human eye favors green color... 
  var a = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return (a < 0.5);
}

var randomRgb = function () {
  var r = /* 189; //*/ Math.floor(Math.random() * 256);
  var g = /*60; //*/ Math.floor(Math.random() * 256);
  var b = /*151; //*/ Math.floor(Math.random() * 256);
  return [r, g, b];
};

var colourFromRgb = function (r, g, b) {
  return 'rgb(' + r + ',' + g + ',' + b + ')';
};

for (var i = 0; i < 1000; i += 1) {
  var el = document.createElement('div');
  el.setAttribute('class', 'box');
  el.textContent = "Hello";
  
  var bgRgb = randomRgb();
  var bgColour = colourFromRgb(bgRgb[0], bgRgb[1], bgRgb[2]);
  var textColour = colourIsLight(bgRgb[0], bgRgb[1], bgRgb[2]) ? 'black' : 'white';
  
  el.setAttribute('style', 'background-color: ' + bgColour + '; color: ' + textColour);
  
  c.appendChild(el);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  text-align: center;
}

.box {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 20px;
  font-family: sans-serif;
  font-weight: bold;
}

<div id="container"></div>

http://codepen.io/WebSeed/full/pvgqEq/