現(xiàn)代 CSS 解決方案：文字顏色自動適配背景色！

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

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

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

其功能能夠涵蓋：

精簡
調(diào)暗
飽和度
降低飽和度
色度增強
調(diào)整不透明度
反轉(zhuǎn)
補充
轉(zhuǎn)換
對比度
調(diào)色板

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

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

快速語法入門

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

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

上圖顯示了將原始顏色 green 轉(zhuǎn)換為新顏色的顏色空間后，該顏色會轉(zhuǎn)換為以 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) */
}

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

解釋一下：

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

通過這個 DEMO，我們把幾個核心基礎(chǔ)語法點學(xué)習(xí)一下：

from 關(guān)鍵字

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

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

第二個關(guān)鍵點，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);
}

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

另外一個非常重要的基礎(chǔ)概念就是，我們可以對 (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) */
}

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

相對顏色的基礎(chǔ)的使用規(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)：

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

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

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

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

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

像是這樣：

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

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

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

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

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

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

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

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

代碼非常簡單：

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

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

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

效果如下：

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

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

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

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

為了解決這兩個問題，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)勢在于：

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

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

總結(jié)一下

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

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

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

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

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

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

大家好，我是大澈！

本文約 800+ 字，整篇閱讀約需 1 分鐘。

今天分享一段優(yōu)質(zhì) CSS 代碼片段，輕松實現(xiàn)一鍵切換主題顏色，在任何項目中都可用。

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

[data-theme='default'] {
  --font-primary: #fff;
  --background-main: #0678be;
}

[data-theme='black'] {
  --font-primary: #fff;
  --background-main: #393939;
}

<html lang="en" data-theme="default"></html>

body {
  color: var(--font-primary);
  background-color: var(--background-main);
}

分享原因

這段代碼可以輕松實現(xiàn)網(wǎng)頁主題的切換，且在各種項目中通用。

先定義不同主題的 CSS 變量，再通過 JavaScript 動態(tài)更改 data-theme 屬性，從而實現(xiàn)頁面樣式的動態(tài)變化。

這種方法不僅簡化了主題管理，還提高了代碼的可讀性和維護性，是我們項目中一般且常用的實現(xiàn)方式之一。

代碼解析

1. 定義主題變量

CSS變量：聲明自定義CSS屬性，它包含的值可以在整個文檔中重復(fù)使用。屬性名需要以兩個減號（--）開始，屬性值則可以是任何有效的 CSS 值。

CSS屬性選擇器：匹配具有特定屬性或?qū)傩灾档脑亍＠鏪data-theme='black']，將選擇所有 data-theme 屬性值為 'black' 的元素。

使用 [data-theme='default'] 和 [data-theme='black'] 選擇器，根據(jù) data-theme 屬性的值定義不同的主題樣式。

定義了兩個 CSS 變量 --font-primary 和 --background-main，分別表示字體顏色和背景顏色。

2. 指定默認主題

在 <html> 元素上添加 data-theme="default"，指定默認主題為 default 。

后面用 js 動態(tài)切換 data-theme 屬性值，然后 CSS 屬性選擇器將自動選擇對應(yīng)的 CSS 變量。

3. 應(yīng)用 CSS 變量

Var函數(shù)：用于使用 CSS 變量。第一個參數(shù)為 CSS 變量名稱，第二個可選參數(shù)作為默認值。

使用 var(--font-primary) 和 var(--background-main) 來引用之前定義的 CSS 變量。

這里設(shè)置 body 元素的 color 和 background-color 屬性，分別引用 --font-primary 和 --background-main 變量，在項目中按需設(shè)置對應(yīng)的元素即可。

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

大家好，我是大澈！

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

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

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

<div class="banner">
    <h1 class="title">每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注與投稿！</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;
    /* 關(guān)鍵點 */
    mix-blend-mode: difference; 
}

分享原因

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

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

這個效果在設(shè)計中很常見，能增加頁面的視覺吸引力，強調(diào)和突出文本內(nèi)容。

代碼解析

1. banner 類

設(shè)置背景元素基礎(chǔ)樣式。

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

2. mix-blend-mode: difference;

這是一個關(guān)鍵設(shè)置。

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

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

3. mix-blend-mode 屬性詳解

mix-blend-mode CSS 屬性描述了元素的內(nèi)容應(yīng)該與其直系父元素的內(nèi)容和元素的背景如何混合。

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

以下是兼容性：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在線咨詢

上一篇：社工必備查詢網(wǎng)址匯總
下一篇：Ukey電子簽名系統(tǒng)，斷網(wǎng)情況下也可以進行電子簽名

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商