內容首發于工粽號：程序員大澈，每日分享一段優質代碼片段，歡迎關注和投稿！

大家好，我是大澈！

本文約 1400+ 字，整篇閱讀約需 2 分鐘。

今天分享一段優質 CSS 代碼片段，讓文本和背景色混合產生一種獨特的效果，就像下圖這種。

老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！

<div class="banner">
    <h1 class="title">每日分享一段優質代碼片段，歡迎關注與投稿！</h1>
</div>

.banner {
    height: 230px;
    background-image: url(./img/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 230px;
    line-height: 230px;
    text-align: center;
}
.title {
    margin: 0;
    color: #fff;
    font-size: 50px;
    /* 關鍵點 */
    mix-blend-mode: difference; 
}

分享原因

這段代碼展示了如何使用 CSS 和 HTML 創建一個帶有背景圖片和標題文本的橫幅（banner），并且通過 mix-blend-mode: difference; 為標題文本添加混合模式效果。

mix-blend-mode 屬性可以為元素設置混合模式，使其顏色與背景顏色混合，從而創建有趣的視覺效果。

這個效果在設計中很常見，能增加頁面的視覺吸引力，強調和突出文本內容。

代碼解析

1. banner 類

設置背景元素基礎樣式。

定義背景圖片，以及讓文本垂直水平居中對齊。

2. mix-blend-mode: difference;

這是一個關鍵設置。

使用了 mix-blend-mode: difference; ，這意味著標題文字的顏色將與其父元素（.banner）的背景顏色進行差值計算，產生類似于反相的效果。

在這種情況下，由于父元素（.banner）的背景是白色，而文字原本的顏色是白色，通過差值計算后，文字顏色就變成了黑色，從而讓白色文字在白色背景上也能夠顯示。

3. mix-blend-mode 屬性詳解

mix-blend-mode CSS 屬性描述了元素的內容應該與其直系父元素的內容和元素的背景如何混合。

它允許創建各種視覺效果，例如半透明效果、陰影、圖片蒙版等。

以下是兼容性：

以下是一些常見的屬性值：

normal：這是默認值，使用正常的顏色混合模式，不產生特殊混合效果。

multiply：將兩個顏色的值相乘，會得到一個更暗的顏色，常用于創建陰影效果。

screen：將兩個顏色的值相加，然后減去相乘的值，會得到一個更亮的顏色，可用于創建高光效果。

overlay：根據背景顏色的亮度來選擇顏色混合模式。如果背景顏色較暗，則使用 multiply 模式；如果背景顏色較亮，則使用 screen 模式。

darken：將兩個顏色的值進行比較，使用較暗的那個顏色。

lighten：與 darken 相反，使用較亮的那個顏色。

color-dodge：將前景色分解為 RGB 分量，并將每個分量分別除以（1 減去背景色的對應分量），然后將每個分量限制在 0 到 1 之間，并使用限制后的前景色作為混合色。這種模式會使顏色變亮。

color-burn：將前景色分解為 RGB 分量，并將每個分量分別除以背景色的對應分量，然后將每個分量限制在 0 到 1 之間，并使用限制后的前景色作為混合色。它會使顏色變暗。

difference：將前景色減去背景色的值，并取絕對值，會導致一種反相的效果。

exclusion：將前景色和背景色的值相加，然后減去相乘的值的兩倍，常用于創建反相效果，但其對比度比 difference 更低，顏色更柔和。

hue：將前景色的色相（hue）與背景色的飽和度（saturation）和亮度（lightness）混合，可在不改變亮度和飽和度的情況下改變顏色。

saturation：將前景色的飽和度與背景色的色相和亮度混合，用于在不改變顏色的情況下改變飽和度。

color：將前景色的色相、飽和度和亮度與背景色混合，會在改變所有顏色屬性的情況下改變前景色的顏色。

luminosity：將前景色的亮度與背景色的色相和飽和度混合，可在不改變顏色的情況下改變亮度。

色是web網頁中非常重要的屬性，背景顏色、字體顏色、邊框顏色等豐富了網頁的友好多彩展示，顏色的設定在CSS中有多種方法，每種方法都有自己的優點和獨到之處。