我想要做的是創建會根據背景顏色更改顏色的界面，以使文本始終可讀。到目前爲止一切正常。我錄我的瀏覽器顯示工作示例：應用混合混合模式後的較濃文本：差異
從我的研究，我發現最好的方法來實現這一目標，是使用mix-blend-mode: difference;。唯一的問題是，由於某些未知的原因，文字越來越大膽。
本來我想提供演示，但mix-blend-mode不在代碼片段中工作。我不確定爲什麼，我看過其他人在演示中使用它，但對我而言，它以紅色突出顯示。
不管怎麼說，這是一個圖片（從瀏覽器截圖的部分）：
正如你所看到的，申請後mix-blend-mode: difference;文字顯然是更厚。也許這不是什麼大問題，但是當我將它應用於較小的文本時，它看起來非常糟糕。
我知道這很愚蠢，但是當我試圖在photoshop中重新創建相同的效果時，一切都很好，這意味着使用difference混合模式反轉顏色可以正常工作。
我的問題是：沒有銘文變得更厚（？）的人可以得到相同的結果，或者它可能是這樣工作的，而且我無能爲力？
我不想將字體樣式更改爲light以強制使用不同的外觀。
編輯：好吧，所以這裏是一個快速的例子 - 我不知道爲什麼，但這次它的工作。最後一次mix-blend-mode: difference;在演示中完全不起作用，這就是爲什麼我使用圖像來描述我的問題。
無論如何，在文本左右一邊是沒有mix-blend-mode: difference;，才能夠看到其中的差別。奇怪的是，沒有mix-blend-mode: difference;的白色版本似乎看起來沒什麼問題 - 我只是通過在黑色背景上添加版本才發現它。
* {
margin: 0;
padding: 0;
}
.white {
background-color: #fff;
width: 50%;
position: absolute;
left: 0;
height: 100%;
}
.black {
background-color: #000;
width: 50%;
position: absolute;
right: 0;
height: 100%;
}
.normalb {
position: absolute;
top: 50%;
left: 5%;
color: #000;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 42px;
transform: translateY(-50%);
z-index: 10;
}
.normalw {
position: absolute;
top: 50%;
right: 5%;
color: #fff;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 42px;
transform: translateY(-50%);
z-index: 10;
}
.difference {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 42px;
mix-blend-mode: difference;
z-index: 10;
}<div class="white"></div>
<div class="black"></div>
<div class="normalb">example</div>
<div class="normalw">example</div>
<div class="difference">example</div>下面是截圖的快速比較得到仔細一看：
嗯...這看起來像應用mix-blend-mode: difference;的白色文字後，它在黑色上呈白色，但在白色背景上呈現，這很奇怪，因爲字體保持不變，所以通過反轉顏色，它應該看起來像普通的白色版本，但它不。我很困惑。
您可以添加的jsfiddle或使該代碼放到一個片段？我們希望能夠看到它的生活。 –
我已添加片段。 – Tanuki
遇到同樣的問題！ – Dikeneko