整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
23 年的 CSS 新特性中，有一個(gè)非常重要的功能更新 -- 相對(duì)顏色。
簡(jiǎn)單而言，相對(duì)顏色的功能，讓我們?cè)?CSS 中，對(duì)顏色有了更為強(qiáng)大的掌控能力。
其核心功能就是，讓我們能夠基于一個(gè)現(xiàn)有顏色 A，通過(guò)一定的轉(zhuǎn)換規(guī)則，快速生成我們想要的顏色 B。
其功能能夠涵蓋：
當(dāng)然，今天我們不會(huì)一個(gè)一個(gè)去過(guò)這些功能，更多的時(shí)候，我們只需要知道我們能夠?qū)崿F(xiàn)這些功能。
本文，我們將從實(shí)際實(shí)用角度出發(fā)，基于實(shí)際的案例，看看 CSS 相對(duì)顏色，能夠如何解決我們的一些實(shí)際問(wèn)題。
首先，我們通過(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è)紅色生成綠色文字呢？示意如下：
p {
--color: rgb(255, 0, 0);
color: rgb(from var(--color) calc(r - 255) calc(g + 255) b); /* result = rgb(0, 255, 0) */
}
效果如下，我們就得到綠色字體：
解釋一下：
通過(guò)這個(gè) DEMO，我們把幾個(gè)核心基礎(chǔ)語(yǔ)法點(diǎn)學(xué)習(xí)一下：
from 關(guān)鍵字，它是相對(duì)顏色的核心。它表示會(huì)將 from 關(guān)鍵字后的顏色定義轉(zhuǎn)換為相對(duì)顏色！在 from 關(guān)鍵字后面，CSS 會(huì)期待一種顏色，即能夠啟發(fā)生成另一種顏色。
第二個(gè)關(guān)鍵點(diǎn)，from 后面通常會(huì)接一個(gè)顏色值，這個(gè)顏色值可以是任意顏色表示法，或者是一個(gè) 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);
}
另外一個(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) */
}
相對(duì)顏色的基礎(chǔ)的使用規(guī)則就是這樣，它不僅支持 rgb 顏色表示法，它支持所有的顏色表示法：
通常頁(yè)面上的按鈕，都會(huì)有 hover/active 的顏色變化，以增強(qiáng)與用戶的交互。
像是這樣：
最常見的寫法，就是我們需要在 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;
}
在之前，我們介紹過(guò)一種利用濾鏡 filter: contrast() 或者 filter: brightness() 的統(tǒng)一解決方案，無(wú)需寫多個(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)：
在實(shí)際業(yè)務(wù)中，這是一個(gè)非常有用的用法。
相對(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 方案。
我們可以利用相對(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)題：
為了解決這兩個(gè)問(wèn)題，CSS 顏色規(guī)范在 CSS Color Module Level 6 又推出了一個(gè)新的規(guī)范 -- color-contrast()。
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ì)在于：
當(dāng)然，唯一限制這個(gè)方案的最大問(wèn)題在于，當(dāng)前，color-contrast 還只是一個(gè)實(shí)驗(yàn)室功能，未大規(guī)模被兼容。
到今天，我們可以利用 CSS 提供的各類顏色函數(shù)，對(duì)顏色有了更為強(qiáng)大的掌控力。
很多交互效果，不借助 JavaScript 的運(yùn)算，也能計(jì)算出我們想要的最終顏色值。本文簡(jiǎn)單的借助：
兩個(gè)案例，介紹了 CSS 相對(duì)顏色的功能。
原文鏈接：https://juejin.cn/post/7321410822789742618
內(nèi)容首發(fā)于工粽號(hào)：程序員大澈，每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注和投稿！
大家好，我是大澈！
本文約 800+ 字，整篇閱讀約需 1 分鐘。
今天分享一段優(yōu)質(zhì) CSS 代碼片段，輕松實(shí)現(xiàn)一鍵切換主題顏色，在任何項(xiàng)目中都可用。
老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(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);
}分享原因
這段代碼可以輕松實(shí)現(xiàn)網(wǎng)頁(yè)主題的切換，且在各種項(xiàng)目中通用。
先定義不同主題的 CSS 變量，再通過(guò) JavaScript 動(dòng)態(tài)更改 data-theme 屬性，從而實(shí)現(xiàn)頁(yè)面樣式的動(dòng)態(tài)變化。
這種方法不僅簡(jiǎn)化了主題管理，還提高了代碼的可讀性和維護(hù)性，是我們項(xiàng)目中一般且常用的實(shí)現(xiàn)方式之一。
代碼解析
1. 定義主題變量
CSS變量：聲明自定義CSS屬性，它包含的值可以在整個(gè)文檔中重復(fù)使用。屬性名需要以兩個(gè)減號(hào)（--）開始，屬性值則可以是任何有效的 CSS 值。
CSS屬性選擇器：匹配具有特定屬性或?qū)傩灾档脑?。例如[data-theme='black']，將選擇所有 data-theme 屬性值為 'black' 的元素。
使用 [data-theme='default'] 和 [data-theme='black'] 選擇器，根據(jù) data-theme 屬性的值定義不同的主題樣式。
定義了兩個(gè) CSS 變量 --font-primary 和 --background-main，分別表示字體顏色和背景顏色。
2. 指定默認(rèn)主題
在 <html> 元素上添加 data-theme="default"，指定默認(rèn)主題為 default 。
后面用 js 動(dòng)態(tài)切換 data-theme 屬性值，然后 CSS 屬性選擇器將自動(dòng)選擇對(duì)應(yīng)的 CSS 變量。
3. 應(yīng)用 CSS 變量
Var函數(shù)：用于使用 CSS 變量。第一個(gè)參數(shù)為 CSS 變量名稱，第二個(gè)可選參數(shù)作為默認(rèn)值。
使用 var(--font-primary) 和 var(--background-main) 來(lái)引用之前定義的 CSS 變量。
這里設(shè)置 body 元素的 color 和 background-color 屬性，分別引用 --font-primary 和 --background-main 變量，在項(xiàng)目中按需設(shè)置對(duì)應(yīng)的元素即可。
內(nèi)容首發(fā)于工粽號(hào)：程序員大澈，每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注和投稿！
大家好，我是大澈！
本文約 1400+ 字，整篇閱讀約需 2 分鐘。
今天分享一段優(yōu)質(zhì) CSS 代碼片段，讓文本和背景色混合產(chǎn)生一種獨(dú)特的效果，就像下圖這種。
老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(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)鍵點(diǎn) */
mix-blend-mode: difference;
}分享原因
這段代碼展示了如何使用 CSS 和 HTML 創(chuàng)建一個(gè)帶有背景圖片和標(biāo)題文本的橫幅（banner），并且通過(guò) mix-blend-mode: difference; 為標(biāo)題文本添加混合模式效果。
mix-blend-mode 屬性可以為元素設(shè)置混合模式，使其顏色與背景顏色混合，從而創(chuàng)建有趣的視覺效果。
這個(gè)效果在設(shè)計(jì)中很常見，能增加頁(yè)面的視覺吸引力，強(qiáng)調(diào)和突出文本內(nèi)容。
代碼解析
1. banner 類
設(shè)置背景元素基礎(chǔ)樣式。
定義背景圖片，以及讓文本垂直水平居中對(duì)齊。
2. mix-blend-mode: difference;
這是一個(gè)關(guān)鍵設(shè)置。
使用了 mix-blend-mode: difference; ，這意味著標(biāo)題文字的顏色將與其父元素（.banner）的背景顏色進(jìn)行差值計(jì)算，產(chǎn)生類似于反相的效果。
在這種情況下，由于父元素（.banner）的背景是白色，而文字原本的顏色是白色，通過(guò)差值計(jì)算后，文字顏色就變成了黑色，從而讓白色文字在白色背景上也能夠顯示。
3. mix-blend-mode 屬性詳解
mix-blend-mode CSS 屬性描述了元素的內(nèi)容應(yīng)該與其直系父元素的內(nèi)容和元素的背景如何混合。
它允許創(chuàng)建各種視覺效果，例如半透明效果、陰影、圖片蒙版等。
以下是兼容性：
以下是一些常見的屬性值：
normal：這是默認(rèn)值，使用正常的顏色混合模式，不產(chǎn)生特殊混合效果。
multiply：將兩個(gè)顏色的值相乘，會(huì)得到一個(gè)更暗的顏色，常用于創(chuàng)建陰影效果。
screen：將兩個(gè)顏色的值相加，然后減去相乘的值，會(huì)得到一個(gè)更亮的顏色，可用于創(chuàng)建高光效果。
overlay：根據(jù)背景顏色的亮度來(lái)選擇顏色混合模式。如果背景顏色較暗，則使用 multiply 模式；如果背景顏色較亮，則使用 screen 模式。
darken：將兩個(gè)顏色的值進(jìn)行比較，使用較暗的那個(gè)顏色。
lighten：與 darken 相反，使用較亮的那個(gè)顏色。
color-dodge：將前景色分解為 RGB 分量，并將每個(gè)分量分別除以（1 減去背景色的對(duì)應(yīng)分量），然后將每個(gè)分量限制在 0 到 1 之間，并使用限制后的前景色作為混合色。這種模式會(huì)使顏色變亮。
color-burn：將前景色分解為 RGB 分量，并將每個(gè)分量分別除以背景色的對(duì)應(yīng)分量，然后將每個(gè)分量限制在 0 到 1 之間，并使用限制后的前景色作為混合色。它會(huì)使顏色變暗。
difference：將前景色減去背景色的值，并取絕對(duì)值，會(huì)導(dǎo)致一種反相的效果。
exclusion：將前景色和背景色的值相加，然后減去相乘的值的兩倍，常用于創(chuàng)建反相效果，但其對(duì)比度比 difference 更低，顏色更柔和。
hue：將前景色的色相（hue）與背景色的飽和度（saturation）和亮度（lightness）混合，可在不改變亮度和飽和度的情況下改變顏色。
saturation：將前景色的飽和度與背景色的色相和亮度混合，用于在不改變顏色的情況下改變飽和度。
color：將前景色的色相、飽和度和亮度與背景色混合，會(huì)在改變所有顏色屬性的情況下改變前景色的顏色。
luminosity：將前景色的亮度與背景色的色相和飽和度混合，可在不改變顏色的情況下改變亮度。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
