前有友友問我，是怎么把圖一變成圖二的？字的顏色都變了？現(xiàn)在就展示一下這個方法。

首先，我們拍攝的照片需要光線盡量保持一致，沒有明顯的的巨大陰影，不然的話調整會比較麻煩。

第一步打卡醒圖APP，導入圖一

第二步，選擇調節(jié)—光感，拉到最高

第三步，依舊是選擇調節(jié)，選擇對比度，拉到最高

第四步：合并圖層（每次調整對比度，都要先合并先前的圖層）

第五步：調節(jié)—對比度，拉到最高，合并圖層

第六步：再次調節(jié)對比度，拉到最高，合并圖層（第三次合并之后本來的顏色已經很淡基本看不清了，看效果圖如下）

我們根據(jù)自己圖片的需要，再次調整對比度，我拍攝的時候保持一個光線，所以陰影也不用調整，直接曝光之后對比度調了四次，最終是這樣的

之后，把圖片傳到電腦上，打開網頁版美圖秀秀（必須是網頁版，手機端美圖秀秀沒有這個功能，用手機訪問網頁版的美圖秀秀，我試過不行）

網頁版的美圖秀秀導入圖片之后，選擇濾鏡——基礎——查看更多

拉到最底下，有一個反色，完成之后，下載圖片，再把圖片導入手機端的醒圖

打開我們事先準備好的照片，插入圖片，插入這個黑底白字圖。

我們要對這個黑底圖進行編輯，選擇婚后，線性減淡，就是圖片效果。

如果我們需要把黑色的字放在淺色的背景上

那就先打開背景圖，也就是圖二，添加圖片（圖一），混合選擇正片疊底

根據(jù)我自己的數(shù)據(jù)，這個方法確實有點效果，展現(xiàn)量可以提高，但是閱讀量還是要靠自己寫的內容是否能吸引讀者。（我的數(shù)據(jù)如下圖）

不過如果展現(xiàn)量都沒有，閱讀量更別指望了對吧？

另外還有一點，配圖多的一般展現(xiàn)量比配圖少的高。

發(fā)表之前先去靈犬檢測一下，不及格的說明可能有敏感詞，需要修改。

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

大家好，我是大澈！

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

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

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

<div class="banner">
    <h1 class="title">每日分享一段優(yōu)質代碼片段，歡迎關注與投稿！</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 創(chuàng)建一個帶有背景圖片和標題文本的橫幅（banner），并且通過 mix-blend-mode: difference; 為標題文本添加混合模式效果。

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

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

代碼解析

1. banner 類

設置背景元素基礎樣式。

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

2. mix-blend-mode: difference;

這是一個關鍵設置。

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

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

3. mix-blend-mode 屬性詳解

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

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

以下是兼容性：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

23 年的 CSS 新特性中，有一個非常重要的功能更新 -- 相對顏色。

簡單而言，相對顏色的功能，讓我們在 CSS 中，對顏色有了更為強大的掌控能力。

其核心功能就是，讓我們能夠基于一個現(xiàn)有顏色 A，通過一定的轉換規(guī)則，快速生成我們想要的顏色 B。

其功能能夠涵蓋：

• 精簡
• 調暗
• 飽和度
• 降低飽和度
• 色度增強
• 調整不透明度
• 反轉
• 補充
• 轉換
• 對比度
• 調色板

當然，今天我們不會一個一個去過這些功能，更多的時候，我們只需要知道我們能夠實現(xiàn)這些功能。

本文，我們將從實際實用角度出發(fā)，基于實際的案例，看看 CSS 相對顏色，能夠如何解決我們的一些實際問題。

快速語法入門

首先，我們通過一張圖，一個案例，快速入門 CSS 相對顏色語法：

相對顏色語法的目標是允許從另一種顏色派生顏色。

上圖顯示了將原始顏色 green 轉換為新顏色的顏色空間后，該顏色會轉換為以 r、g、b 和 alpha 變量表示的各個數(shù)字，這些數(shù)字隨后會直接用作新的 rgb() 顏色的值。

舉個例子：

<p> CSS Relative Color </p>

p {
    color: rgb(255, 0, 0);
}

實現(xiàn)一個 color 為紅色（rgb 值為 rgb(255, 0, 0)）的字體：

基于上面的相對顏色語法，我如何通過一個紅色生成綠色文字呢？示意如下：

p {
    --color: rgb(255, 0, 0);
    color: rgb(from var(--color) calc(r - 255) calc(g + 255) b);  /* result=rgb(0, 255, 0) */
}

效果如下，我們就得到綠色字體：

解釋一下：

1. 原本的紅色顏色，我們把它設置為 CSS 變量 --color: rgb(255, 0, 0)
2. 想通過紅色得到綠色，對于紅色的 rgb 值 rgb(255, 0, 0) 而言，需要轉換成 rgb(0, 255, 0)
3. 使用 CSS 相對顏色語法，就是 rgb(from var(--color) calc(r - 255) calc(g + 255) b)

通過這個 DEMO，我們把幾個核心基礎語法點學習一下：

1. from 關鍵字

from 關鍵字，它是相對顏色的核心。它表示會將 from 關鍵字后的顏色定義轉換為相對顏色！在 from 關鍵字后面，CSS 會期待一種顏色，即能夠啟發(fā)生成另一種顏色。

2. from 關鍵字 后的顏色表示，支持不同顏色表示或者是 CSS 變量

第二個關鍵點，from 后面通常會接一個顏色值，這個顏色值可以是任意顏色表示法，或者是一個 CSS 變量，下面的寫法都是合法的：

p {
    color: rgba(from #ff0000) r g b);
    color: rgb(from rgb(255, 0, 0) r g b);
    color: rgb(from hsl(0deg, 100%, 50%) r g b);
    color: rgb(from var(--hotpink) r g b);
}

3. 對轉換后的變量使用 calc() 或其他 CSS 函數(shù)

另外一個非常重要的基礎概念就是，我們可以對 (from color r g b) 后的轉換變量 r g b 使用 calc() 或其他 CSS 函數(shù)。

就是我們上面的例子：

p {
    --color: rgb(255, 0, 0);
    color: rgb(from var(--color) calc(r - 255) calc(g + 255) b);  /* result=rgb(0, 255, 0) */
}

4. 相對顏色語法支持，各種顏色表示函數(shù)：

相對顏色的基礎的使用規(guī)則就是這樣，它不僅支持 rgb 顏色表示法，它支持所有的顏色表示法：

• sRGB 顏色空間：hsl()、hwb()、rgb()；
• CIELAB 顏色空間：lab()、lch()；
• Oklab 顏色空間：oklab()、oklch()；

使用 CSS 相對顏色，實現(xiàn)統(tǒng)一按鈕點擊背景切換

通常頁面上的按鈕，都會有 hover/active 的顏色變化，以增強與用戶的交互。

像是這樣：

最常見的寫法，就是我們需要在 Normal 狀態(tài)、Hover 狀態(tài)、Active 狀態(tài)下寫 3 種顏色：

p {
    color: #ffcc00;
    transition: .3s all;
}
/* Hover 偽類下為 B 顏色 */
p:hover {
    color: #ffd21f;
}
/** Active 偽類下為 C 顏色 **/
p:active {
    color: #ab8a05;
}

在之前，我們介紹過一種利用濾鏡 filter: contrast() 或者 filter: brightness() 的統(tǒng)一解決方案，無需寫多個顏色值，可以根據(jù) Normal 狀態(tài)下的色值，通過濾鏡統(tǒng)一實現(xiàn)更亮、或者更暗的偽類顏色。

在今天，我們也可以利用 CSS 相對顏色來做這個事情：

div {
    --bg: #fc0;
    background: var(--bg);
    transition: .3s all;
}

div:hover {
    background: hsl(from var(--bg) h s calc(l * 1.2));
}
div:active {
    background: hsl(from var(--bg) h s calc(l * 0.8));
}

我們通過 hsl 色相、飽和度、亮度顏色表示法表示顏色。實現(xiàn)：

1. 在 :hover 狀態(tài)下，根據(jù)背景色，將背景亮度 l 調整為原背景色的 1.2 倍
2. 在 :avtive 狀態(tài)下，根據(jù)背景色，將背景亮度 l 調整為原背景色的 0.8 倍

在實際業(yè)務中，這是一個非常有用的用法。

使用 CSS 相對顏色，實現(xiàn)文字顏色自適應背景

相對顏色，還有一個非常有意思的場景 -- 讓文字顏色能夠自適應背景顏色進行展示。

有這么一種場景，有的時候，無法確定文案的背景顏色的最終表現(xiàn)值（因為背景顏色的值可能是后臺配置，通過接口傳給前端），但是，我們又需要能夠讓文字在任何背景顏色下都正常展現(xiàn)（譬如當?shù)咨珵楹谏珪r文字應該是白色，當背景為白色時，文字應該為黑色）。

像是這樣：

在不確定背景顏色的情況下，無論什么情況，文字顏色都能夠適配背景的顏色。

在之前，純 CSS 沒有特別好的方案，可以利用 mix-blend-mode: difference 進行一定程度的適配：

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

實操過這個方案的同學都會知道，在一定情況下，前景文字顏色還是會有一點瑕疵。并且，混合模式這個方案最大的問題是會影響清晰度。

有了 CSS 相對顏色后，我們有了更多的純 CSS 方案。

利用 CSS 相對顏色，反轉顏色

我們可以利用相對顏色的能力，基于背景色顏色進行反轉，賦值給 color。

一種方法是將顏色轉換為 RGB，然后從 1 中減去每個通道的值。

代碼非常簡單：

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b));  /** 基于背景反轉顏色 **/
}

用 1 去減，而不是用 255 去，是因為此刻，會將 rgb() 表示法中的 0~255 映射到 0~1。

效果如下：

配個動圖，我們利用背景色的反色當 Color 顏色，適配所有背景情況：

完整的 DEMO 和代碼，你可以戳這里：CodePen Demo -- CSS Relatvie Color Adapt BG

當然，這個方案還有兩個問題：

1. 如果顏色恰好是在 #808080 灰色附近，它的反色，其實還是它自己！會導致在灰色背景下，前景文字不可見；
2. 絕大部分情況雖然可以正常展示，但是并不是非常美觀好看

為了解決這兩個問題，CSS 顏色規(guī)范在 CSS Color Module Level 6 又推出了一個新的規(guī)范 -- color-contrast()。

利用 color-contrast()，選擇高對比度顏色

color-contrast() 函數(shù)標記接收一個 color 值，并將其與其他的 color 值比較，從列表中選擇最高對比度的顏色。

利用這個 CSS 顏色函數(shù)，可以完美的解決上述的問題。

我們只需要提供 #fff 白色和 #000 黑色兩種可選顏色，將這兩種顏色和提供的背景色進行比較，系統(tǒng)會自動選取對比度更高的顏色。

改造一下，上面的代碼，它就變成了：

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: color-contrast(var(--bg) vs #fff, #000);  /** 基于背景色，自動選擇對比度更高的顏色 **/
}

這樣，上面的 DEMO 最終效果就變成了：

此方案的優(yōu)勢在于：

1. 可以限定前景 color 顏色為固定的幾個色值，以保證 UI 層面的統(tǒng)一及美觀
2. 滿足任何情況下的背景色

當然，唯一限制這個方案的最大問題在于，當前，color-contrast 還只是一個實驗室功能，未大規(guī)模被兼容。

總結一下

到今天，我們可以利用 CSS 提供的各類顏色函數(shù)，對顏色有了更為強大的掌控力。

很多交互效果，不借助 JavaScript 的運算，也能計算出我們想要的最終顏色值。本文簡單的借助：

1. 使用 CSS 相對顏色，實現(xiàn)統(tǒng)一按鈕點擊背景切換
2. 使用 CSS 相對顏色，實現(xiàn)文字顏色自適應背景

兩個案例，介紹了 CSS 相對顏色的功能。

原文鏈接：https://juejin.cn/post/7321410822789742618