讓 color 自動適配背景色？分享 1 段優質 CSS 代碼片段！

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

大家好，我是大澈！

本文約 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：將前景色的亮度與背景色的色相和飽和度混合，可在不改變顏色的情況下改變亮度。

晚，前端程序員阿鋒剛剛回到家，經理便打來電話說道：我們的網站首頁要調整成黑白色，辛苦加個班實現一下吧！很多時候總會遇到一些突發事件需要網站首頁均呈灰色。那要如何讓網頁變灰呢？

阿鋒首先想到：圖片方面的內容只要換一個圖片就好，其他的就是靠控制 css 來進行改變。但是一個網站有很多個css, 那么多的元素都有自己的顏色,整體變灰的工作量大，效率低。所以要有簡便快捷的方法。

方案1

sass / less 等 css預編譯語言來解決
再用這些 css預編譯語言來開發的時候, 一般會根據主色調來定義一些顏色變量
$globalColor: gray;
$globalBtnColor: gray;
// ...
當修改變量的時候, 就會導致整個網站的主色調改變顏色

但是，因為 sass / less 都是開發階段使用的內容
一旦修改, 就需要從新編譯打包成新的文件進行服務器部署，會相對比較麻煩
而且一些細節的地方可能會遺漏掉 (比如沒有用全局變量的地方)

方案二

為了簡單一些, 快速一些操作，而且過段時間還要變回來，所以可以采取濾鏡的方式
一個非常簡單的 css 代碼
filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
可以選擇直接改 css 文件, 把濾鏡添加到 html 標簽
html {
filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}
也可以直接修改 html 文件, 把css 樣式以行內式的方式添加到 html 標簽上
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">

這樣就簡單高效的實現了網頁的黑白灰色調。

角邊框：

在CSS3中，新增了圓角邊框樣式，這樣我們的盒子就可以變圓角了

border-radius屬性用于設置元素的外邊框圓角。

語法：

border-radius: length;

盒子陰影：

CSS3中新增了盒子陰影，我們可以使用box-shadow屬性為盒子添加陰影。

語法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	說明
h-shadow	必需的。水平陰影的位置。允許負值
v-shadow	必需的。垂直陰影的位置。允許負值
blur	可選。模糊距離
spread	可選。陰影的大小
color	可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表
inset	可選。從外層的陰影（開始時）改變陰影內側陰影

文字陰影：

在CSS3中，我們可以使用text-shadow屬性將陰影應用于文字

text-shadow： h-shawow v-shadow blur color;

值	描述
h-shadow	必需。水平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值。
blur	可選。模糊的距離。
color	可選。陰影的顏色。參閱 CSS 顏色值。

詳情可參考

https://www.runoob.com/ 菜鳥教程

https://www.w3school.com.cn/ w3c

在線咨詢

上一篇：元氏縣醫療保障局城鄉居民醫保辦事明白紙
下一篇：window彈出、提示框

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

讓 color 自動適配背景色？分享 1 段優質 CSS 代碼片段！

方案1

方案二

角邊框：

盒子陰影：

文字陰影：

您的項目需求