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

簡(jiǎn)單而言，相對(duì)顏色的功能，讓我們?cè)?CSS 中，對(duì)顏色有了更為強(qiáng)大的掌控能力。

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

其功能能夠涵蓋：

• 精簡(jiǎn)
• 調(diào)暗
• 飽和度
• 降低飽和度
• 色度增強(qiáng)
• 調(diào)整不透明度
• 反轉(zhuǎn)
• 補(bǔ)充
• 轉(zhuǎn)換
• 對(duì)比度
• 調(diào)色板

當(dāng)然，今天我們不會(huì)一個(gè)一個(gè)去過(guò)這些功能，更多的時(shí)候，我們只需要知道我們能夠?qū)崿F(xiàn)這些功能。

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

快速語(yǔ)法入門(mén)

首先，我們通過(guò)一張圖，一個(gè)案例，快速入門(mén) CSS 相對(duì)顏色語(yǔ)法：

相對(duì)顏色語(yǔ)法的目標(biāo)是允許從另一種顏色派生顏色。

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

舉個(gè)例子：

<p> CSS Relative Color </p>

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

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

基于上面的相對(duì)顏色語(yǔ)法，我如何通過(guò)一個(gè)紅色生成綠色文字呢？示意如下：

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

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

解釋一下：

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

通過(guò)這個(gè) DEMO，我們把幾個(gè)核心基礎(chǔ)語(yǔ)法點(diǎn)學(xué)習(xí)一下：

1. from 關(guān)鍵字

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

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

第二個(gè)關(guān)鍵點(diǎn)，from 后面通常會(huì)接一個(gè)顏色值，這個(gè)顏色值可以是任意顏色表示法，或者是一個(gè) CSS 變量，下面的寫(xiě)法都是合法的：

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. 對(duì)轉(zhuǎn)換后的變量使用 calc() 或其他 CSS 函數(shù)

另外一個(gè)非常重要的基礎(chǔ)概念就是，我們可以對(duì) (from color r g b) 后的轉(zhuǎn)換變量 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. 相對(duì)顏色語(yǔ)法支持，各種顏色表示函數(shù)：

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

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

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

通常頁(yè)面上的按鈕，都會(huì)有 hover/active 的顏色變化，以增強(qiáng)與用戶的交互。

像是這樣：

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

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

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

在今天，我們也可以利用 CSS 相對(duì)顏色來(lái)做這個(gè)事情：

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

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

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

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

使用 CSS 相對(duì)顏色，實(shí)現(xiàn)文字顏色自適應(yīng)背景

相對(duì)顏色，還有一個(gè)非常有意思的場(chǎng)景 -- 讓文字顏色能夠自適應(yīng)背景顏色進(jìn)行展示。

有這么一種場(chǎng)景，有的時(shí)候，無(wú)法確定文案的背景顏色的最終表現(xiàn)值（因?yàn)楸尘邦伾闹悼赡苁呛笈_(tái)配置，通過(guò)接口傳給前端），但是，我們又需要能夠讓文字在任何背景顏色下都正常展現(xiàn)（譬如當(dāng)?shù)咨珵楹谏珪r(shí)文字應(yīng)該是白色，當(dāng)背景為白色時(shí)，文字應(yīng)該為黑色）。

像是這樣：

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

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

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

實(shí)操過(guò)這個(gè)方案的同學(xué)都會(huì)知道，在一定情況下，前景文字顏色還是會(huì)有一點(diǎn)瑕疵。并且，混合模式這個(gè)方案最大的問(wèn)題是會(huì)影響清晰度。

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

利用 CSS 相對(duì)顏色，反轉(zhuǎn)顏色

我們可以利用相對(duì)顏色的能力，基于背景色顏色進(jìn)行反轉(zhuǎn)，賦值給 color。

一種方法是將顏色轉(zhuǎn)換為 RGB，然后從 1 中減去每個(gè)通道的值。

代碼非常簡(jiǎn)單：

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

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

用 1 去減，而不是用 255 去，是因?yàn)榇丝蹋瑫?huì)將 rgb() 表示法中的 0~255 映射到 0~1。

效果如下：

配個(gè)動(dòng)圖，我們利用背景色的反色當(dāng) Color 顏色，適配所有背景情況：

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

當(dāng)然，這個(gè)方案還有兩個(gè)問(wèn)題：

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

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

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

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

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

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

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

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

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

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

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

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

當(dāng)然，唯一限制這個(gè)方案的最大問(wèn)題在于，當(dāng)前，color-contrast 還只是一個(gè)實(shí)驗(yàn)室功能，未大規(guī)模被兼容。

總結(jié)一下

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

很多交互效果，不借助 JavaScript 的運(yùn)算，也能計(jì)算出我們想要的最終顏色值。本文簡(jiǎn)單的借助：

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

兩個(gè)案例，介紹了 CSS 相對(duì)顏色的功能。

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

天小胖在coding的時(shí)候，遇到一個(gè)問(wèn)題，就是要使用一個(gè)動(dòng)態(tài)的文本作為div的背景，想著使用絕對(duì)定位堆疊來(lái)實(shí)現(xiàn)，或者偽元素實(shí)現(xiàn)，終歸不夠優(yōu)雅，直到看到張?chǎng)涡翊罄械倪@篇文章，只能說(shuō)，很當(dāng)優(yōu)雅！

在實(shí)際開(kāi)發(fā)中，有時(shí)候希望文字內(nèi)容可以作為背景圖片顯示，一方面是希望利用背景圖片的優(yōu)勢(shì)，例如可以平鋪，另外一方面是常見(jiàn)的替換元素不能使用偽元素創(chuàng)建文字，此時(shí)只能寄希望與背景圖。

關(guān)鍵如何把文字變成背景圖呢？

通常CSS開(kāi)發(fā)人員的做法是把文字導(dǎo)出來(lái)轉(zhuǎn)換成圖片，然后作為背景圖顯示，但是這樣成本有些高，也不利于日后的維護(hù)。

這里給大家介紹一種實(shí)用的技術(shù)，可以讓文字作為CSS背景圖片。

一、SVG本質(zhì)上就是一個(gè)圖像

SVG雖然是XML語(yǔ)言構(gòu)成的，但是本質(zhì)上就是一個(gè)圖像，是可以作為圖像使用的，例如：

<img src="zhangxinxu.svg">

此時(shí)的zhangxinxu.svg就是一個(gè)圖像，同樣的，也可以作為背景圖顯示，例如：

.example {
    background: url(zhangxinxu.svg);
}

但是，這里的SVG文件都是獨(dú)立的SVG文件，和把文字導(dǎo)出成PNG圖片沒(méi)有任何區(qū)別，根本沒(méi)有意義嘛！

對(duì)的，請(qǐng)不用急，是這樣的，SVG作為一個(gè)矢量圖像，和通常的位圖有一點(diǎn)不一樣，那就是SVG圖像可以直接以源代碼的方式內(nèi)聯(lián)在Web頁(yè)面中。

關(guān)于這個(gè)特性，可以參考我之前的這篇文章：“學(xué)習(xí)了，CSS中內(nèi)聯(lián)SVG圖片有比Base64更好的形式 ? 張?chǎng)涡?鑫空間-鑫生活”。

例如下面是一段顯示文本的SVG代碼：

<svg xmlns="http://www.w3.org/2000/svg">
    <text>文字內(nèi)容</text>
</svg>

是可以直接作為background-image使用的，例如：

.by-zhangxinxu {
    background-image: url('<svg xmlns="http://www.w3.org/2000/svg"><text>文字內(nèi)容</text></svg>');
}

由于安全性限制，目前需要對(duì)部分字符進(jìn)行轉(zhuǎn)義，因此，實(shí)際的CSS代碼是這樣的：

.exmaple {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext%3E文字內(nèi)容%3C/text%3E%3C/svg%3E");
}

相比PNG圖像的文字背景，使用SVG內(nèi)聯(lián)的好處在于，我們可以輕松修改文字的內(nèi)容，同時(shí)我們可以隨意設(shè)置文字的字號(hào)大小，顏色、描邊效果等等。

但是，每次都手寫(xiě)一段SVG代碼好難哦，尤其很多前端小伙伴對(duì)SVG并不是很熟悉。

不要緊，考慮到這種情況存在，我專門(mén)做了一個(gè)生成SVG文字背景圖的工具。

二、SVG文字背景圖生成工具

您可以狠狠地點(diǎn)擊這里：文字轉(zhuǎn)SVG圖像在線轉(zhuǎn)換工具 ? 張?chǎng)涡?鑫空間-鑫生活

界面截圖示意如下：

最上面是配置區(qū)域，可以設(shè)置作為背景的文字內(nèi)容，可以設(shè)置文字的顏色、透明度以及位置等信息。

中間是代碼區(qū)，左側(cè)是原始SVG，可以點(diǎn)擊圖標(biāo)下載SVG文件到本地；右側(cè)是轉(zhuǎn)義的可以直接內(nèi)聯(lián)使用的SVG代碼，HTML和CSS中均可內(nèi)聯(lián)使用。

最下面是預(yù)覽區(qū)域。

如果需要其他配置項(xiàng)

實(shí)際開(kāi)發(fā)中的需求是千變?nèi)f化的，工具目前內(nèi)置的配置項(xiàng)不一定能覆蓋所有的場(chǎng)景，此時(shí)可以這么處理，直接修改左側(cè)文本域中的SVG代碼，此時(shí)右側(cè)的轉(zhuǎn)義SVG代碼會(huì)自動(dòng)同步，例如，如果我們希望背景文字帶有旋轉(zhuǎn)效果，這樣可以作為水印圖片使用，則可以在已經(jīng)生成的SVG代碼中的元素上設(shè)置45度旋轉(zhuǎn)相關(guān)的代碼。

一種方法是直接在<svg>元素上設(shè)置傳統(tǒng)DOM元素的CSS style設(shè)置，例如：

另外一種方法就是<text>元素上使用SVG元素自動(dòng)的transform屬性進(jìn)行設(shè)置，但是SVG中的transform變換坐標(biāo)和CSS是很不一樣的，直接<text transform="rotate(-45)">是不會(huì)有預(yù)期的旋轉(zhuǎn)效果的，因?yàn)槟J(rèn)SVG的變換中心點(diǎn)是左上角，因此，設(shè)置transform="rotate(-45)"會(huì)讓文字不可見(jiàn)。

關(guān)于SVG的transform變換坐標(biāo)體系可以參考我之前寫(xiě)的這篇文章：“理解SVG transform坐標(biāo)變換”

<text>元素也能?chē)@中心點(diǎn)變換有2個(gè)方法，一種是使用translate()函數(shù)先偏移、然后再旋轉(zhuǎn)，然后在偏移復(fù)原，這種方法啰嗦了一點(diǎn)，另外一種方法就是使用SVG中rotate()函數(shù)的可選參數(shù)，也就是第2個(gè)參數(shù)，就是可以指定旋轉(zhuǎn)的中心點(diǎn)坐標(biāo)，這個(gè)特性SVG獨(dú)有，Canvas中是沒(méi)有的。

代碼演示如下截圖所示：

其中，可以看到專門(mén)設(shè)置了SVG元素的width寬和height高，因?yàn)槿绻辉O(shè)置，按照目前的CSS background-size的尺寸渲染規(guī)范，SVG的尺寸會(huì)采用容器的尺寸，rotate()函數(shù)的第2個(gè)參數(shù)就需要設(shè)置為容器元素的寬高的一半才能讓文字居中旋轉(zhuǎn)。

更新于 2022-01-25

dominant-baseline="middle" 只是近似垂直居中，如果 SVG 圖片高度較小，會(huì)看到往上偏移了一點(diǎn)距離，此時(shí)可以試試修改為 dominant-baseline="central"。

三、文字背景圖應(yīng)用案例

這里拋磚引玉，舉幾個(gè)使用文字作為背景圖的例子。

1. 水印

例如為防止截圖，會(huì)給頁(yè)面，或者聊天軟件背景等增加文字水印。

以前幾乎都是通過(guò)生成一個(gè)專門(mén)的PNG圖片實(shí)現(xiàn)，現(xiàn)在可以直接代碼內(nèi)聯(lián)，例如點(diǎn)擊下面這個(gè)按鈕，大家就可以看到我這篇文章的實(shí)時(shí)水印效果了。

不要害怕，用力點(diǎn)擊我

相關(guān)CSS代碼如下所示：

.target {
    background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.5' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'%3Ezhangxinxu.com%3C/text%3E%3C/svg%3E");
}

截圖效果如下所示：

2. 輸入框其他位置的占位符提示效果

常規(guī)的占位符都是在輸入框的左上方，或者右上方，如果我們希望提示的占位符在右下角，則就可以使用這里的文本圖像技術(shù)實(shí)現(xiàn)。

比方說(shuō)下面這個(gè)多行文本域輸入框，當(dāng)你輸入內(nèi)容，右下角的提示內(nèi)容就會(huì)消失，沒(méi)有內(nèi)容的時(shí)候就又會(huì)顯示（實(shí)時(shí)效果，可以親自體驗(yàn)下）。

相關(guān)HTML和CSS代碼如下所示：

<textarea class="custom-placeholder" required></textarea>

.custom-placeholder {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='100%25' y='96%25' font-size='12' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='end'%3E富強(qiáng)民主文明和諧美麗%3C/text%3E%3C/svg%3E") no-repeat right 10px bottom 5px;
}
.custom-placeholder:valid {
    background: none;
}

因?yàn)檫@里的文本是右對(duì)齊，下對(duì)齊，因此，設(shè)置text-anchor屬性值是end，同時(shí)x, y屬性值都是100%或者接近100%。

3. 視頻無(wú)法播放提示

HTML5 <video>元素中的視頻如果因?yàn)榈刂峰e(cuò)誤等原因無(wú)法播放，是沒(méi)有辦法像普通元素那樣寫(xiě)入一段錯(cuò)誤提示文字，因?yàn)?/span><video>元素是替換元素，寫(xiě)在標(biāo)簽里面的內(nèi)容都會(huì)被忽略。

此時(shí)，可以讓視頻播放出錯(cuò)的時(shí)候以背景圖的形式顯示文字就可以了。

比方說(shuō)下面這個(gè)實(shí)時(shí)例子，就是一個(gè)故意寫(xiě)錯(cuò)了地址的MP4視頻，大家可以看到“視頻無(wú)法預(yù)覽”的白色提示文字，就是使用這篇文章提供的技術(shù)實(shí)現(xiàn)的。

相關(guān)代碼如下所示：

<video src="xxx.png" type="video/mp4" width="360" height="240" onerror="this.classList.add('error')"></video>

video.error{
    background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill='%23ffffff' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E視頻無(wú)法預(yù)覽%3C/text%3E%3C/svg%3E") no-repeat center;
}

簡(jiǎn)單易懂體驗(yàn)絕佳老少皆宜。

四、總結(jié)一下

如果想讓文字內(nèi)容直接作為背景圖片顯示，可以使用SVG元素作為中間橋梁實(shí)現(xiàn)。

關(guān)鍵問(wèn)題是SVG元素的獲得不太容易，因此，我就專門(mén)給大家開(kāi)發(fā)了一個(gè)工具，通過(guò)簡(jiǎn)單配置實(shí)現(xiàn)想要的CSS文字背景代碼。

同時(shí)介紹了如果通過(guò)修改左側(cè)輸入框得到自定義的文字背景效果。

最后，介紹了3個(gè)具有代表性的案例，展示了文字作為背景圖片的一些妙用，拋磚引玉，希望可以啟發(fā)大家在實(shí)際開(kāi)發(fā)中的應(yīng)用。

OK，技術(shù)本身并不難，難的是當(dāng)遇到類似場(chǎng)景的時(shí)候可以想到可以直接使用代碼實(shí)現(xiàn)，而不是導(dǎo)出圖片。

好，以上就是本文的全部?jī)?nèi)容，感謝您的閱讀，如果您覺(jué)得本文內(nèi)容還挺有幫助的，歡迎分享。

本文轉(zhuǎn)自張?chǎng)涡翊罄械姆窒恚牡刂罚喝绾巫屛淖肿鳛镃SS背景圖片顯示？ ? 張?chǎng)涡?鑫空間-鑫生活，張大佬經(jīng)常分享一些很不錯(cuò)的css idea，推薦大家經(jīng)常刷刷他的博客，他的書(shū)也不錯(cuò)，大家也可以買(mǎi)來(lái)讀一讀！