黑色文本在黑色背景上时变成白色

Question

我正在创建一个允许玩家移动的游戏世界。

同时，有一些GUI元素（如状态）没有背景（背景是游戏世界）。

这些元素的文本颜色为黑色。我的问题是：

当背景变为黑色时，这个文本能否变为白色？或者这个文本是否始终与背景颜色相反？

- Brunon Blok

---

个人建议：使用黑色文本和白色轮廓。 - Feathercrown

这是如何反转颜色的方法：https://dev59.com/QWkw5IYBdhLWcg3w2-TH - Kevin Kloet

欢迎来到 Stack Overflow！请阅读 [ask]。关键词：“搜索和研究”以及“解释...任何阻止您自行解决问题的困难”。 - Heretic Monkey

那么，您是在谈论根据任意图像背景（例如随着背景动画而动态更改）设置文本颜色吗？ - Gabriele Petrioli

黑色文本带白色轮廓看起来很糟糕，@GabyakaG.Petrioli 是的。当玩家移动时，他始终处于同一位置，但游戏对象在移动，因此当黑色GUI文本位于黑色游戏对象上时，它是无法阅读的。 - Brunon Blok

Answer 1

有一个 CSS 属性可以完全满足您的需求，但是支持性有些受限 (不支持 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>

---

如果想要更广泛的支持，可以使用box-shadow技巧（由@Rourin发布），还可以与mix-blend-mode结合使用，效果最佳。另外一种替代方案是使用canvas元素重复应用CSS效果，并在程序中应用该效果，但这需要更多的投入和更高的性能。

- Gabriele Petrioli

---

这正是我在寻找的，谢谢！我已将您的回答标记为有帮助。 - Brunon Blok

Answer 2

最好不要倒置颜色，因为倒置的颜色往往难以阅读，会对眼睛造成很大的负担。

这里有一个非常棒的算法，它可以根据背景自动选择最易读的文字颜色。

当你绘制帧和文本时，可以在游戏循环中使用这个示例。

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/

- Timmetje

---

很有帮助，谢谢。但我不知道如何将其实现到我的游戏中，这种颜色变化必须适用于所有文档和每个框架，因为例如玩家的统计数据在每个框架中都会通过js进行更新。 - Brunon Blok

这就是为什么在游戏中你需要将其添加到游戏循环中。你还需要每帧绘制GUI。例如：function run(running){drawBackground(); drawPlayer(); drawMonsters(); drawBullets(); drawGui();} 在drawGui中，你需要检查使用bg值和算法来绘制GUI。 - Timmetje

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>

- Rounin