6月安卓手機好評榜：魅族20 Pro蟬聯(lián)冠軍
性能榜和性價比榜之后，我們來看最后的安卓手機好評榜，數(shù)據(jù)來源安兔兔評測，收集時間2023年6月1日至6月30日，僅限國內(nèi)市場。第一名：魅族20 Pro好評率：95%5月份的時候魅族20 Pro就是
在正式開始介紹之前，可以先想一個問題：如何動態(tài)去改變一個顏色的透明度？
比如一個顏色
:root{ color: red}如何將它變成透明度為 50% 的紅色呢？
現(xiàn)在 Chrome 119 中，令人無比期待的 CSS 相對顏色終于正式支持了！有了它，可以很輕松地將一個顏色轉(zhuǎn)換成任意你所需要的顏色，對設(shè)計師和前端都非常友好，一起了解一下吧
CSS 相對顏色（CSS relative color）是 CSS Color Level 5[1] 的新特性，它可以將一個顏色以某種顏色格式進(jìn)行分解、重組，從而得到一個全新的顏色。
語法非常簡單，以rgb為例。
color: rgb(from red r g b / alpha)這個表示將顏色red以rgb模式，分解成r、g、b（alpha）幾個單獨的變量，非常類似 JS 中的結(jié)構(gòu)賦值。
也就是說，上面的寫法最后等同于。
color: rgb(255 0 0 / 100%)那么，這個有什么用呢？
其實經(jīng)過上面的from關(guān)鍵詞分解以后，得到的r、g、b、alpha都是獨立的變量，我們可以將任意變量改寫成所需要的，比如透明度為50%。
color: rgb(from red r g b / 50%) /* rgb(255 0 0 / 50%) */注意，這里的顏色是完全動態(tài)的，我們還可以用 CSS 變量將任意顏色實時改變透明度。
--color: red;--color50: rgb(from var(--color) r g b / 50%)下面是一個演示，可以實時將顏色的透明度變?yōu)?0%。
你也可以訪問在線鏈接
從上一節(jié)我們了解到，通過from關(guān)鍵詞，可以將一個顏色分解成幾個獨立變量，比如r、g、b、alpha，但是，僅僅這樣是不夠的。
回到文章標(biāo)題，為什么說是相對顏色呢？那肯定是和現(xiàn)在的顏色有些關(guān)聯(lián)，要做到這一點，需要用到 CSS calc 函數(shù)。
舉個例子，比如一個半透明的紅色。
--color: rgba(255,0,0,.5)如何在這個基礎(chǔ)上繼續(xù)降低20%的透明度呢？
很簡單，將這個顏色分解后，直接用calc進(jìn)行計算。
--color: rgba(255,0,0,.5)--color20: rgb(from var(--color) r g b / calc(alpha - .2)) /*rgba(255,0,0,.3)*/這樣，無論給定的顏色是什么透明度，都可以在這個基礎(chǔ)之上降低20%，這就是「相對顏色」！
下面介紹的幾個例子都需要用到calc，接著往下看。
顏色的加深和減淡其實是提升和降低顏色的亮度。
提到亮度，需要用到有表示亮度（light）的顏色空間，比如說綠色，用hls表示如下：
如果需要將這個綠色加深，就是需要將亮度調(diào)暗一點，比如減少10%。
color: hsl(from green h s calc(l - .1 )); /*hsl(120deg 100% 15%)*/如果需要將這個綠色減淡，其實就是需要將亮度調(diào)高一點。
color: hsl(from green h s calc(l + .1 )); /*hsl(120deg 100% 35%)*/下面是實際效果（中間是原色，兩邊分別是減淡和加深的效果）。
和上面的例子一樣，還可以通過改變顏色的飽和度，讓顏色更加鮮艷。
當(dāng)然，這里就不能用上面的綠色了，因為它的飽和度已經(jīng)是100了，我們換一個比較溫和的綠色。
color: hsl(122.42deg 39.44% 49.22%);
如果需要將這個綠色更加鮮艷一點，就是需要將飽和度提高一點，比如增加30%。
color: hsl(from var(--color) h calc(s + .3) l); /*hsl(122.42deg 69.44% 49.22%)*/如果需要將這個綠色看起來暗淡無光，直到成灰色，其實就是需要需要將飽和度減少一點。
color: hsl(from var(--color) h calc(s - .3) l); /*hsl(122.42deg 9.44% 49.22%)*/下面是實際效果（中間是原色，兩邊分別飽和度降低和增強的效果）。
在 CSS 濾鏡中有一個色相旋轉(zhuǎn)濾鏡，可以很輕松的改變?nèi)我庠氐纳唷?span style="display:none">lia28資訊網(wǎng)——每日最新資訊28at.com
filter: hug-rotate(30deg)不過這種濾鏡是整體改變，無法只改變某個顏色。
現(xiàn)在用 CSS 相對顏色就很好實現(xiàn)了，比如下面是紅色在經(jīng)過一系列色相變化后的效果。
--color: red;--color1: hsl(from var(--color) calc(h + 30 ) s l);--color2: hsl(from var(--color) calc(h + 30 ) s l);--color3: hsl(from var(--color) calc(h + 60 ) s l);...效果如下：
這里每個顏色色相相差 30度， 相差180度的就是光學(xué)互補色，比如紅色和青色（淺綠色）就是互補色。
所謂反向，就是黑的變白，白的變黑，藍(lán)的變黃，綠的變紫色，這個在濾鏡中也有現(xiàn)成的。
filter: invert(1)那么，相對顏色中如何計算呢？
其實這個是 rgb的計算方式，只需要將每個通道的顏色值反過來就行了，就像這樣。
color: rgb(from yellow calc(1 - r) calc(1 - g) calc(1 - b));注意，這里的值都是歸一化處理的，1 表示 255。
效果如下，左邊是原色，右邊是反色。
以上所有演示可以訪問以下鏈接
CSS 相對顏色可以說是關(guān)于 CSS 顏色處理最為強大的新特性了，幾乎可以滿足在 CSS 中一切關(guān)于顏色的計算，再也無需 JS參與計算了，下面總結(jié)一下要點。
當(dāng)然相對顏色的應(yīng)用遠(yuǎn)遠(yuǎn)不止以上幾點，可以說能夠想到的場景都可以用這種方式來解決，將來，這一特性在全局主題應(yīng)用中尤為重要，一起期待一下吧。
[1]CSS Color Level 5： https://www.w3.org/TR/css-color-5/#relative-colors。
[2]CSS relative color (juejin.cn)： https://code.juejin.cn/pen/7297274766421917747。
[3]CSS relative color (codepen.io)： https://code.juejin.cn/pen/7297274766421917747。
[4]CSS relative colors demo (juejin.cn)： https://code.juejin.cn/pen/7297507402143203337。
[5]CSS relative colors demo (codepen.io)： https://code.juejin.cn/pen/7297507402143203337。
本文鏈接：http://www.tebozhan.com/showinfo-26-17286-0.html快速了解CSS 相對顏色
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 優(yōu)雅處理Java字符串：提升編程效率的技巧與實踐
下一篇： 聊聊Golang飽受爭議的Error
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號