黒いテキスト - 黒い背景の白い

Question

私はプレーヤーが動くことができる世界でゲームを作ります。

背景がない要素（背景はゲーム世界）を持つGUI（eq、stats ..）があります。

これらの要素は、黒のテキストの色を持っているし、私の質問は：

白にこのテキストの変更が黒にbackground'llことができるとき、またはこのtext'llがバックグラウンドよりも常に反対の色になることができますか？

Answer 1

あり正確に何をしたいんCSSプロパティはありませんが、support is a bit limited（なしIE /エッジ）。

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を使用することができます

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 3

。

実施例：

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