首頁 >web前端 >css教學 >巧用 CSS混合模式 讓文字智慧適配背景顏色

巧用 CSS混合模式 讓文字智慧適配背景顏色

青灯夜游
青灯夜游轉載
2022-09-08 11:02:042879瀏覽

巧用 CSS混合模式 讓文字智慧適配背景顏色

頁面上有一段文本,能否實現這段文本在不同背景色下展示不同的顏色?也就是俗稱的智能變色。像是下面這樣:

文字在黑色底色上表現為白色,在白色底色上表現為黑色。看似很複雜的一個效果,但其實在CSS 中非常好實現,今天就介紹這樣一個小技巧,在CSS 中,利用混合模式mix-blend-mode: difference,讓文字智能適配背景顏色。 【建議學習:css影片教學

混合模式mix-blend-mode: difference

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%);
    }
}

效果如下:

##CodePen Demo -- linear-gradient Mix-blend-mode

當然,不一定是黑色或白色,看看下面這個例子,有這樣一種場景,有的時候我們不太確定背景顏色的最終表現值(可能是後台配置,傳給前端),但是又需要讓文字能夠在任何背景顏色下都正常展出,此時,也可以嘗試使用

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

元素都可以正常顯示文字:

CodePen Demo -- mix-blend-mode:difference實作文字顏色自適應底色

mix-blend-mode:difference 的缺點

當然,這個方法不是完美的,因為透過

mix-blend-mode:difference 與底色疊加之後的顏色,雖然能夠正常展示,但是不一定是最適合的顏色,展示效果的最好的顏色。

這裡實際使用的時候,在非黑白場景下,還需要多加實驗加以取捨。

最後

總結一下,本文介紹了利用CSS 混合模式實現文字適配背景展示的一個小技巧,如果你對混合模式感興趣,推薦你再看看我的下列文章:

  • 不可思議的混合模式mix-blend-mode
  • 不可思議的混合模式background-blend-mode
  • 兩行CSS 程式碼實作圖片任意顏色賦色技術
  • #巧用CSS 建立漸層彩色二維碼
  • CSS 奇技淫巧| 妙用混合模式實現文字鏤空波浪效果
  • 探究CSS 混合模式\濾鏡導致CSS 3D 失效問題
  • CSS 藝術-- 利用background 創造各種美妙的背景
#好了,本文到此結束,希望對你有幫助

#原文網址:https://www.cnblogs.com/coco1s/p/16012545.html

作者:ChokCoco

(學習影片分享:web前端

以上是巧用 CSS混合模式 讓文字智慧適配背景顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除