前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)

頁面上有一段文本，能否實(shí)現(xiàn)這段文本在不同背景色下展示不同的顏色？也就是俗稱的智能變色。像是下面這樣：

文本在黑色底色上表現(xiàn)為白色，在白色底色上表現(xiàn)為黑色?？此坪軓?fù)雜的一個(gè)效果，但是其實(shí)在 CSS 中非常好實(shí)現(xiàn)，今天就介紹這樣一個(gè)小技巧，在 CSS 中，利用混合模式 mix-blend-mode: difference，讓文字智能適配背景顏色?！就扑]學(xué)習(xí)：css視頻教程】

混合模式 mix-blend-mode: difference

CSS3 新增了一個(gè)很有意思的屬性 — mix-blend-mode ，其中 mix 和 blend 的中文意譯均為混合，那么這個(gè)屬性的作用直譯過來就是混合混合模式，當(dāng)然，我們我們通常稱之為混合模式。一共有下圖所示的一些混合模式：

其中，本文的主角是 mix-blend-mode: difference，意為差值模式。該混合模式會(huì)查看每個(gè)通道中的顏色信息，比較底色和繪圖色，用較亮的像素點(diǎn)的像素值減去較暗的像素點(diǎn)的像素值。

與白色混合將使底色反相；與黑色混合則不產(chǎn)生變化。

通俗一點(diǎn)就是上方圖層的亮區(qū)將下方圖層的顏色進(jìn)行反相，暗區(qū)則將顏色正常顯示出來，效果與原圖像是完全相反的顏色。

該混合模式最常見的應(yīng)用場景就是文章開頭描述的場景，實(shí)現(xiàn)文本在不同背景色下展示不同的顏色。

最適合于黑白場景，非常簡單的一個(gè) 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%);     } }

效果如下：

CodePen Demo — linear-gradient + Mix-blend-mode

當(dāng)然，不一定是黑色或者白色，看看下面這個(gè)例子，有這樣一種場景，有的時(shí)候我們不太確定背景顏色的最終表現(xiàn)值（可能是后臺(tái)配置，傳給前端），但是又需要讓文字能夠在任何背景顏色下都正常展出，此時(shí)，也可以嘗試使用 mix-blend-mode: difference。

<ul class="flex-box">   <div class="box">     <p>開通會(huì)員查看我的VIP等級</p>   </div>    // .....  </ul>

div {     // 不確定的背景色 } p {     color: #fff;     mix-blend-mode: difference; }

無論背景色是什么顏色，設(shè)置了 mix-blend-mode: difference 的 <p> 元素都可以正常展示出文本：

CodePen Demo — mix-blend-mode:difference實(shí)現(xiàn)文字顏色自適應(yīng)底色

mix-blend-mode:difference 的缺點(diǎn)

當(dāng)然，這個(gè)方法不是完美的，因?yàn)橥ㄟ^ mix-blend-mode:difference 與底色疊加之后的顏色，雖然能夠正常展示，但是不一定是最適合的顏色，展示效果的最好的顏色。

這里實(shí)際使用的時(shí)候，在非黑白場景下，還需要多加實(shí)驗(yàn)加以取舍。

最后

總結(jié)一下，本文介紹了利用 CSS 混合模式實(shí)現(xiàn)文本適配背景展示的一個(gè)小技巧，如果你對混合模式感興趣，推薦你再看看我的下列文章：

• 不可思議的混合模式 mix-blend-mode
• 不可思議的混合模式 background-blend-mode
• 兩行 CSS 代碼實(shí)現(xiàn)圖片任意顏色賦色技術(shù)
• 巧用 CSS 構(gòu)建漸變彩色二維碼
• CSS 奇技淫巧 | 妙用混合模式實(shí)現(xiàn)文字鏤空波浪效果
• 探究 CSS 混合模式濾鏡導(dǎo)致 CSS 3D 失效問題
• CSS 藝術(shù) — 使用 background 創(chuàng)造各種美妙的背景

好了，本文到此結(jié)束，希望對你有幫助

原文地址：https://www.cnblogs.com/coco1s/p/16012545.html

作者：ChokCoco

（學(xué)習(xí)視頻分享：web前端）