整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          現(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) */
          }
          

          效果如下,我們就得到綠色字體:

          解釋一下:

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

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

          1. from 關(guān)鍵字

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

          1. 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);
          }
          
          1. 對轉(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) */
          }
          
          1. 相對顏色語法支持,各種顏色表示函數(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):

          1. 在 :hover 狀態(tài)下,根據(jù)背景色,將背景亮度 l 調(diào)整為原背景色的 1.2 倍
          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

          當然,這個方案還有兩個問題:

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

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

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

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

          總結(jié)一下

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

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

          1. 使用 CSS 相對顏色,實現(xiàn)統(tǒng)一按鈕點擊背景切換
          2. 使用 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:將前景色的亮度與背景色的色相和飽和度混合,可在不改變顏色的情況下改變亮度。


          主站蜘蛛池模板: 成人乱码一区二区三区av| 免费看无码自慰一区二区| 亚洲一区二区三区写真| 亚洲AV无码一区二区三区在线观看 | 亚洲日韩精品无码一区二区三区| 亚洲AV无码一区二区三区鸳鸯影院| 国产麻豆精品一区二区三区v视界 国产美女精品一区二区三区 | 2021国产精品一区二区在线| 国产丝袜视频一区二区三区| A国产一区二区免费入口| 麻豆视传媒一区二区三区| 在线一区二区观看| 亚洲精品国产suv一区88| 国产成人精品日本亚洲专一区| 一区二区三区观看免费中文视频在线播放| 精品人妻一区二区三区毛片| 亚洲一区日韩高清中文字幕亚洲 | 国产福利一区视频| 亚洲sm另类一区二区三区 | 国产av成人一区二区三区| 日韩福利视频一区| 无码精品蜜桃一区二区三区WW | 国产综合精品一区二区三区| 中文字幕乱码一区二区免费| 日本一区二区三区精品中文字幕| 99国产精品一区二区| 亚洲av一综合av一区| 亚洲天堂一区二区三区| 成人精品一区二区三区校园激情| 国模精品一区二区三区视频| 麻豆视频一区二区三区| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 在线日韩麻豆一区| 国产精品亚洲综合一区| 激情一区二区三区| 精品人妻系列无码一区二区三区 | 色综合一区二区三区| 久久婷婷色综合一区二区| 久久精品国产免费一区| 国产精品一级香蕉一区| 国产精品一区二区综合|