背景預設顏色(CSS前景背景自動配色的方法)

　　一、顏色匹配效果預覽

　　如下GIF示意,當我們按鈕背景色逐漸變淡的時候,文字顏色也從原來的白色變成黑色了,同時邊框也顯示出來了,其中的配色轉換是純CSS實現的。

　　auto-color-button.gif

　　自動配色按鈕示意

　　拖動R,G,B對應滑塊,可以看到按鈕文字顏色以及邊框顏色,會自動根據背景色不同而發生變化。具體表現為:

　　深色背景下,文字白色,無邊框。

　　淺色背景下,文字黑色,有加深邊框,便于和周圍環境區分開。

　　這種智能匹配是純CSS實現的,主要是使用CSS3calc()計算,以及CSS3原生var變量。

　　二、配色代碼展示

　　HTML代碼很簡單,如下:

　　<buttonclass="btn">我是按鈕</button>

　　重點和難點在CSS部分:

　　:root{

　　/*定義RGB變量*/

　　--red:44;

　　--green:135;

　　--blue:255;

　　/*文字顏色變色的臨界值,建議0.5~0.6*/

　　--threshold:0.5;

　　/*深色邊框出現的臨界值,范圍0~1,推薦0.8+*/

　　--border-threshold:0.8;

　　}

　　.btn{

　　/*按鈕背景色就是基本背景色*/

　　background:rgb(var(--red),var(--green),var(--blue));

　　/**

　　*使用sRGBLuma方法計算灰度(可以看成亮度)

　　*算法為:

　　*lightness=(red*0.2126+green*0.7152+blue*0.0722)/255

　　*/

　　--r:calc(var(--red)*0.2126);

　　--g:calc(var(--green)*0.7152);

　　--b:calc(var(--blue)*0.0722);

　　--sum:calc(var(--r)+var(--g)+var(--b));

　　--lightness:calc(var(--sum)/255);

　　/*設置顏色*/

　　color:hsl(0,0%,calc((var(--lightness)-var(--threshold))*-999999%));

　　/*確定邊框透明度*/

　　--border-alpha:calc((var(--lightness)-var(--border-threshold))*100);

　　/*設置邊框相關樣式*/

　　border:.2emsolid;

　　border-color:rgba(calc(var(--red)-50),calc(var(--green)-50),calc(var(--blue)-50),var(--border-alpha));

　　}

　　乍一看,猶如鴨子聽雷&mdash;&mdash;不知所云,其實不復雜,且容我剖析下實現原理。

　　三、前景背景自動配色原理

　　1.CSS屬性值范圍溢出邊界渲染特性

　　CSS這門語言有個很有意思的特性,就是CSS屬性值超過正常的范圍的時候,只要格式正確,也會渲染,而渲染的值就是合法邊界值。

　　舉兩個板栗:

　　opacity透明度屬性值合法范圍是0-1,但是,你設置負數,或者極大值,瀏覽器也能解析,只是要么是0,要么是1而已,如下:

　　.example{

　　opacity:-2;/*解析為0,完全透明*/

　　opacity:-1;/*解析為0,完全透明*/

　　opacity:2;/*解析為1,完全不透明*/

　　opacity:100;/*解析為1,完全不透明*/

　　}

　　色值,如HSL,S和L的范圍都是0%-100%,但是,你設置負數,或者極大值,瀏覽器也能解析,只是要么是0%,要么是100%而已,如下:

　　.example{

　　color:hsl(0,0%,-100%);/*解析為hsl(0,0%,0%),黑色*/

　　color:hsl(0,0%,200%);/*解析為hsl(0,0%,100%),白色*/

　　}

　　本文的配色技術就活用了這種邊界渲染特性。

　　2.var變量傳遞給calc實現復雜計算

　　我們對CSS代碼從上往下逐個剖析下。

　　首先,在:root根選擇器上定義幾個全局CSS變量(語義上的全局):

　　:root{

　　--red:44;

　　--green:135;

　　--blue:255;

　　--threshold:0.5;

　　--border-threshold:0.8;

　　}

　　其中:

　　&ndash;threshold

　　這個是color變色的臨界值,用來和當前RGB顏色值的亮度對比。

　　&ndash;border-threshold

　　這個是邊框顏色透明度的臨界值,同樣也是和當前RGB顏色值的亮度對比。

　　然后是。btn{}內部的CSS代碼:

　　background:rgb(var(--red),var(--green),var(--blue));

　　這個很好理解,就是基本的RGB色值作為背景色。

　　--r:calc(var(--red)*0.2126);

　　--g:calc(var(--green)*0.7152);

　　--b:calc(var(--blue)*0.0722);

　　--sum:calc(var(--r)+var(--g)+var(--b));

　　--lightness:calc(var(--sum)/255);

　　這里5行5個CSS變量,需要的其實是最后一個--lightness,就是計算當前背景色的亮度。用的是使用sRGBLuma灰度算法①,為什么需要5行呢?因為計算公式就是如此:

　　lightness=(red*0.2126+green*0.7152+blue*0.0722)/255

　　其中,R,G,B色值相乘的系數就是固定的,不同灰度算法系數還不一樣。--lightness表示亮度,范圍是0-1,此時就可以和--threshold和--border-threshold這兩個臨界值比對,來確定按鈕的文字顏色,邊框透明度。

　?、龠@里的灰度可以看成是亮度,實際上HSL的亮度計算方法應該是,R,G,B中的色值最大值和最小值之和的二分之一。

　　color:hsl(0,0%,calc((var(--lightness)-var(--threshold))*-999999%))

　　設置顏色的CSS代碼。

　　此處calc計算翻譯成中文就是:(亮度值&ndash;臨界值)*比例系數。

　　其中亮度值在0-1之間游走,臨界值是固定的0.5,于是:

　　如果亮度值小于0.5,亮度值減去臨界值為負,由于我們的比例系數是很大很大的負數,負負得正,于是,會得到一個巨大的正數,按照邊界渲染原理,會按照100%渲染,于是顏色是白色;

　　如果亮度值大于0.5,亮度值減去臨界值為正,由于我們的比例系數是很大很大的負數,于是,會得到一個巨大的負數,按照邊界渲染原理,會按照0%渲染,于是顏色是黑色;

　　以上就是按鈕文字顏色變色背景下黑色,深色背景下白色的原理。

　　--border-alpha:calc((var(--lightness)-var(--border-threshold))*100);

　　邊框透明度是類似的原理。此處calc計算翻譯成中文就是:(亮度值&ndash;邊框臨界值)*100。

　　其中亮度值在0-1之間游走,邊框臨界值是固定的0.8,于是:

　　如果亮度值小于0.8,亮度值減去邊框臨界值為負,在CSS中,負數透明度會按照邊界0渲染,此時邊框完全透明;

　　如果亮度值大于0.8,亮度值減去邊框臨界值為正,此時的透明度計算值會在0~20之間游走,當然,數值大于1的透明度值都會按照1渲染,此時,邊框基本處于完全不透明狀態,加深的邊框顯現;

　　border:.2emsolid;

　　border-color:rgba(calc(var(--red)-50),calc(var(--green)-50),calc(var(--blue)-50),var(--border-alpha));

　　設置邊框樣式,邊框顏色比背景色深50個單位值(負數為按照0渲染),然后透明度就是基于亮度動態計算的。深色背景下,按鈕邊框透明度為0,不顯示;淺色背景下,透明度在0~1之間游走,出現,北京顏色越淺,邊框透明度越大,邊框顏色越深,符合配色預期。

　　相信經過上面的一番剖析,大家就會明白其實現的原理了。

　　改變按鈕的背景色

　　.btn類名下的CSS代碼是固定的,讓我們需要改變按鈕的顏色的時候,不是改。btn下的CSS,而是修改:root中的下面3個變量值:

　　--red:44;

　　--green:135;

　　--blue:255;

　　CSS設置直接改數值,如果是JS設置,借助setProperty()方法,若不了解,可以參考這篇文章:“如何HTML標簽和JS中設置CSS3var變量”。

　　四、最后結束語

　　由于var的兼容性限制,這個非常有意思的CSS技巧還不太適合在大型對外項目中使用。

　　小程序可以一試,因為內核環境相對固定。內部系統,實驗項目可以玩一玩,會很有意思。

　　這種配色技巧其實不僅可以用在按鈕上,一些大區域的布局也是可以用的,因為這些布局的背景色可能是動態的,此時,文字顏色的配色也可以借助CSS實現自動化。

　　另外,本文demo中按鈕文字就黑白兩色,實際上,我們的相乘系數小一點的話,可以有更多的色值出現,配色會更加精致。

到此,相信大家對“CSS前景背景自動配色的方法”有了更深的了解,不妨來實際操作一番吧!這里是本站網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!