黑色文本-在黑色背景上的白色

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).

还有一些GUI (eq, stats.)，它包含没有背景的元素(背景是游戏世界)。

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?

当背景是黑色的时候，这个文本会变成白色吗?或者这个文本总是与背景颜色相反吗?

3 个解决方案

#1

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

有一个css属性可以实现您想要的功能，但是支持有点有限(没有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.

混合型CSS属性描述了元素的内容如何与元素的直接父元素的内容和元素的背景混合。

Relevant example:

#2

Its best not to invert because inverted colors also can be very unreadable or just very straining for the eyes.

最好不要倒置，因为倒过来的颜色也可能非常难以读懂，或者只会对眼睛造成很大的压力。

Here is a really cool algorithm that automatically chooses the most legible text color based on background.

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

You can use this example in your game loop when you draw the frames and texts.

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

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/

#3

You can use 4 text-shadows to give the black text a white outline.

你可以使用四个文本阴影给黑色的文本一个白色的轮廓。

Working Example:

工作的例子:

.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>

#1