Question

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

还有一些GUI（eq，stats ..），其元素没有背景（背景是游戏世界）。

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

当背景为黑色时，此文字是否会变为白色，或者此文字的颜色是否总是与背景颜色相反？

Answer 1

最好不要倒置，因为倒置的颜色也可能非常难以理解，或者对眼睛来说非常紧张。

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

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

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/

Answer 2

有一个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 3

您可以使用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>

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

3 个答案: