超碰人人人人人,亚洲AV午夜福利精品一区二区,亚洲欧美综合区丁香五月1区,日韩欧美亚洲系列

在 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)色板

完整的教程，你可以看這里 -- Chrome for Developers- CSS 相對(duì)顏色語(yǔ)法

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

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

快速語(yǔ)法入門

首先，我們通過(guò)一張圖，一個(gè)案例，快速入門 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è)紅色生成綠色文字呢？示意如下：

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

解釋一下：

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 變量，下面的寫法都是合法的：

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

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

就是我們上面的例子：

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)的寫法，就是我們需要在 Normal 狀態(tài)、Hover 狀態(tài)、Active 狀態(tài)下寫 3 種顏色：

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

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

我們通過(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è)非常有用的用法。

完整的 DEMO，你可以戳這里：CodePen Demo -- https://codepen.io/Chokcoco/pen/KKEdOeb

使用 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)行一定程度的適配：

實(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)單：

用 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ì)比度更高的顏色。

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

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

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

此方案的優(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ì)顏色的功能。但它其實(shí)還有更為廣闊的應(yīng)用場(chǎng)景，完整的教程，你可以看這里 -- Chrome for Developers- CSS 相對(duì)顏色語(yǔ)法。

作者：ChokCoco

轉(zhuǎn)自：https://www.cnblogs.com/coco1s/p/17951792