頁面上有一段文本，能否實現這段文本在不同背景色下展示不同的顏色？也就是俗稱的智能變色。像是下面這樣：
文字在黑色底色上表現為白色，在白色底色上表現為黑色。看似很複雜的一個效果，但其實在CSS 中非常好實現，今天就介紹這樣一個小技巧，在CSS 中，利用混合模式mix-blend-mode: difference，讓文字智能適配背景顏色。 【建議學習：css影片教學】
CSS3 新增了一個很有趣的屬性-- mix-blend-mode ，其中mix 和blend 的中文意譯均為混合，那麼這個屬性的作用直譯過來就是混合混合模式，當然，我們我們通常稱之為混合模式。一共有下圖所示的一些混合模式：
其中，本文的主角是mix-blend-mode: difference，意為差值模式。此混合模式會查看每個通道中的顏色訊息，比較底色和繪圖色，並用較亮的像素點的像素值減去較暗的像素點的像素值。
與白色混合將使底色反相；與黑色混合則不會產生變化。
通俗一點就是上方圖層的亮區將下方圖層的顏色進行反相，暗區則將顏色正常顯示出來，效果與原始影像是完全相反的顏色。
此混合模式最常見的應用場景就是文章開頭描述的場景，實作文字在不同背景色下展示不同的顏色。
最適合黑白場景，非常簡單的一個DEMO：
<div></div>
div {
height: 100vh;
background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
&::before {
content: "LOREM IPSUM";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
mix-blend-mode: difference;
animation: move 3s infinite linear alternate;
}
}
@keyframes move {
0% {
transform: translate(-30%, -50%);
}
100% {
transform: translate(-70%, -50%);
}
}效果如下：
當然，不一定是黑色或白色，看看下面這個例子，有這樣一種場景，有的時候我們不太確定背景顏色的最終表現值（可能是後台配置，傳給前端），但是又需要讓文字能夠在任何背景顏色下都正常展出，此時，也可以嘗試使用
mix-blend-mode: difference。
<ul class="flex-box"> <div class="box"> <p>开通会员查看我的VIP等级</p> </div> // ..... </ul>
div {
// 不确定的背景色
}
p {
color: #fff;
mix-blend-mode: difference;
}mix-blend-mode: difference 的
元素都可以正常顯示文字：
mix-blend-mode:difference 與底色疊加之後的顏色，雖然能夠正常展示，但是不一定是最適合的顏色，展示效果的最好的顏色。
#原文網址：https://www.cnblogs.com/coco1s/p/16012545.html作者：ChokCoco
（學習影片分享：web前端）
以上是巧用 CSS混合模式 讓文字智慧適配背景顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！
