一、色彩婚配结果预览
以下GIF示意，当我们按钮背景色逐步变淡的时刻，笔墨色彩也从本来的白色变成黑色了，同时边框也显现出来了，个中的配色转换是纯CSS完成的。
自动配色按钮示意
拖动R，G，B对应滑块，能够看到按钮笔墨色彩以及边框色彩，会自动依据背景色差别而发生变化。具体表现为：
深色背景下，笔墨白色，无边框。
淡色背景下，笔墨黑色，有加深边框，便于和周围环境区离开。
这类智能婚配是纯CSS完成的，主假如运用CSS3 calc（）盘算，以及CSS3原生var变量。
二、配色代码展现
HTML代码很简单，以下：
<button class="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））；
/**
* 运用sRGB Luma要领盘算灰度（能够算作亮度）
* 算法为：
* 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: .2em solid;
border-color: rgba（calc（var（--red） - 50）， calc（var（--green） - 50）， calc（var（--blue） - 50）， var（--border-alpha））；
}
乍一看，如同鸭子听雷——不知所云，实在不庞杂，且容我理会下完成道理。
三、远景背景自动配色道理
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;
}
个中：
–threshold
这个是color变色的临界值，用来和当前RGB色彩值的亮度对比。
–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，就是盘算当前背景色的亮度。用的是运用sRGB Luma灰度算法①，为何须要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盘算翻译成中文就是：（亮度值 – 临界值） * 比例系数。
个中亮度值在0-1之间游走，临界值是牢固的0.5，因而：
假如亮度值小于0.5，亮度值减去临界值为负，因为我们的比例系数是很大很大的负数，负负得正，因而，会获得一个庞大的正数，根据边境衬着道理，会根据100%衬着，因而色彩是白色；
假如亮度值大于0.5，亮度值减去临界值为正，因为我们的比例系数是很大很大的负数，因而，会获得一个庞大的负数，根据边境衬着道理，会根据0%衬着，因而色彩是黑色；
以上就是按钮笔墨色彩变色背景下黑色，深色背景下白色的道理。
--border-alpha: calc（（var（--lightness） - var（--border-threshold）） * 100）；
边框通明度是相似的道理。此处calc盘算翻译成中文就是：（亮度值 – 边框临界值） * 100。
个中亮度值在0-1之间游走，边框临界值是牢固的0.8，因而：
假如亮度值小于0.8，亮度值减去边框临界值为负，在CSS中，负数通明度会根据边境0衬着，此时边框完整通明；
假如亮度值大于0.8，亮度值减去边框临界值为正，此时的通明度盘算值会在0~20之间游走，固然，数值大于1的通明度值都邑根据1衬着，此时，边框基础处于完整不通明状况，加深的边框展现；
border: .2em solid; 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中设置CSS3 var变量”。
四、末了结束语
因为var的兼容性限定，这个异常有意义的CSS技能还不太适合在大型对外项目中运用。
小顺序能够一试，因为内核环境相对牢固。内部体系，试验项目能够玩一玩，会很有意义。
这类配色技能实在不仅能够用在按钮上，一些大地区的规划也是能够用的，因为这些规划的背景色多是动态的 ，此时，笔墨色彩的配色也能够借助CSS完成自动化。
别的，本文demo中按钮笔墨就是非两色，实际上，我们的相乘系数小一点的话，能够有更多的色值涌现，配色会越发细腻。
以上就是对CSS远景背景自动配色手艺的悉数引见，假如您想相识更多有关CSS3教程，请关注ki4网。
以上就是CSS远景背景自动配色手艺简介（代码实例）的细致内容，更多请关注ki4网别的相干文章！
