基於背景的反向文本顏色

Question

我試圖根據背景顏色更改文本顏色。假設我有黑色條紋背景，整體背景爲白色，我需要白色背景上的文字黑色和黑色背景上的白色文字。

有沒有辦法做到這一點，只能用CSS？如果不是，那麼做到這一點的最佳做法是什麼？查看HTML波紋管：

<div class="background"> 
    <p>Aliquam dolor nunc, auctor non dolor vitae, eleifend fringilla felis. Praesent dapibus erat ut nisl commodo ullamcorper.</p> 
    <p>Morbi eget urna augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 
    <p>Nullam laoreet auctor urna at eleifend. Proin venenatis hendrerit mauris, mollis malesuada lorem consectetur et. Aliquam sed iaculis augue.</p> 
    <p>Donec viverra ex in lectus luctus porttitor.</p> 
</div> 

CSS

.background { 
    width: 480px; 
    height: 480px; 
    background-image: url(http://www.musicsquare-pro.com/construction/wp-content/themes/punch/images/masks/mask_square_dark.png); 
    background-size: 480px 480px; 
} 

這裏有一個更好地瞭解Codepen。謝謝。

Answer 1

您可以使用mix-blend-mode屬性來實現此效果。我必須警告你，IE中不存在支持。要做你想做的事情，你需要讓所有的元素重疊，就像你已經有的那樣，然後把<span>或者你正在使用的任何元素設置爲mix-blend-mode: difference;。

如果您想要使用實際顏色而不是黑白，則需要具有該顏色的另一個元素。它需要覆蓋您想要應用顏色的整個區域，並將其設置爲screen。

儘管如此，元素不應該在彼此內部。文本需要在背景元素之上，但不能在內部。我建議一個包裝<div>來解決這個問題。

Answer 2

你可以把這樣的：

• 爲背景：background-color: black;或background-color: white;

• 文本：color: black;或color:white;。