介绍
小编给大家分享一下CSS前景背景自动配色技术是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
一、颜色匹配效果预览
如下GIF示意,当我们按钮背景色逐渐变淡的时候,文字颜色也从原来的白色变成黑色了,同时边框也显示出来了,其中的配色转换是纯CSS实现的。
自动配色按钮示意
拖动R, G, B对应滑块,可以看到按钮文字颜色以及边框颜色,会自动根据背景色不同而发生变化,具体表现为:
深色背景下,文字白色,无边框。
浅色背景下,文字黑色,有加深边框,便于和周围环境区分开。
这种智能匹配是纯CSS实现的,主要是使用CSS3 calc()计算,以及CSS3原生var变量。
二,配色代码展示
HTML代码很简单,如下:
& lt;按钮类=癰tn"在我是按钮& lt;/button> 重点和难点在CSS部分:
:根{/*定义RGB变量*/?44;
——绿:135;
蓝色:255;/*文字颜色变色的临界值,建议0.5 ~ 0.6 */兄?0.5;/*深色边框出现的临界值,范围0 ~ 1,推荐0.8 + */猙order-threshold: 0.8;
}
.btn {/*按钮背景色就是基本背景色*/背景:rgb (var(——红色),var(绿色),var(蓝色));/* *
*使用sRGB亮度方法计算灰度(可以看成亮度)
*算法为:
*明度=(红色* 0.2126 +绿* 0.7152 +蓝* 0.0722)/255
*/猺:钙(var(红)* 0.2126);
——g:钙(var(绿色)* 0.7152);
——b:钙(var(蓝色)* 0.0722);
——总结:钙(var (- r) + var (- g) + var (- b));
——明度:钙(var(总和)/255);/*设置颜色*/颜色:高速逻辑(0、0%、钙((var(轻)- var(阈值))* -999999%));/*确定边框透明度*/猙order-alpha:钙((var(轻)- var (——border-threshold)) * 100);/*设置边框相关样式*/边界:.2em固体;
边框颜色:rgba (calc (var(红)- 50),钙(var(绿色)- 50),钙(var(——蓝色)- 50),var (——border-alpha));
} 乍一看,犹如鸭子听雷——不知所云,其实不复杂,且容我剖析下实现原理。
三,前景背景自动配色原理
1。CSS属性值范围溢出边界渲染特性
CSS这门语言有个很有意思的特性,就是CSS属性值超过正常的范围的时候,只要格式正确,也会渲染,而渲染的值就是合法边界值。
举两个板栗:
透明度透明度属性值合法范围是0 - 1,但是,你设置负数,或者极大值,浏览器也能解析,只是要么是0,要么是1而已,如下:
。{例子
透明度:2;/*解析为0,完全透明*/透明度:1;/*解析为0,完全透明*/透明度:2;/*解析为1,完全不透明*/透明度:100;/*解析为1,完全不透明*/} 色值,如高速逻辑,年代和L的范围都是0% - -100%,但是,你设置负数,或者极大值,浏览器也能解析,只是要么是0%,要么是100%而已,如下:
。{例子
颜色:高速逻辑(0、0%、-100%);/*解析为高速逻辑(0、0%、0%),黑色*/颜色:高速逻辑(0、0%、200%);/*解析为高速逻辑(0、0%、100%),白色*/} 本文的配色技术就活用了这种边界渲染特性。
2。var变量传递给calc实现复杂计算
我们对CSS代码从上往下逐个剖析下。
首先,在:根根选择器上定义几个全局CSS变量(语义上的全局):
:根{
——红:44;
——绿:135;
蓝色:255;
——阈值:0.5;
——border-threshold: 0.8;
} 其中:
)
这个是颜色变色的临界值,用来和当前RGB颜色值的亮度对比。
-border-threshold
这个是边框颜色透明度的临界值,同样也是和当前RGB颜色值的亮度对比。
然后是.btn{}内部的CSS代码:
背景:RGB (var(——红色),var(绿色),var(蓝色)); 这个很好理解,就是基本的RGB色值作为背景色。
——r:钙(var(红)* 0.2126);
——g:钙(var(绿色)* 0.7152);
——b:钙(var(蓝色)* 0.0722);
——总结:钙(var (- r) + var (- g) + var (- b));
——明度:钙(var(总和)/255); 这里5行5个CSS变量,需要的其实是最后一个轻盈,就是计算当前背景色的亮度。用的是使用sRGB亮度灰度算法①,为什么需要5行呢?因为计算公式就是如此:
明度=(红色* 0.2126 +绿* 0.7152 +蓝* 0.0722)/255 其中,R, G, B色值相乘的系数就是固定的,不同灰度算法系数还不一样。——明度表示亮度,范围是0 - 1,此时就可以和——阈值和border-threshold这两个临界值比对,来确定按钮的文字颜色,边框透明度。
