html文字颜色自动变化,按钮文字颜色随着背景色自动变化 » CSS新世界demo演示

CSS：

:root {

/* 定义RGB变量 */

--red: 44;

--green: 135;

--blue: 255;

/**

* 使用sRGB Luma方法计算灰度(可以看成亮度)

* 算法为：

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

*/

--lightness: calc((var(--red) * 0.2126 + var(--green) * 0.7152 + var(--blue) * 0.0722) / 255);=

}

.btn {

font-size: 150%;

padding: .5em 2em;

border: .2em solid;

}

.btn {

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

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

/**

* --lightness亮度和0.5对比

* 大于，则正数，和-999999%相乘，会得到一个巨大负数，浏览器会按照边界0%渲染，也就是亮度为0，于是颜色是黑色；

* 小于，则和-999999%相乘，会得到一个巨大的正数，以最大合法值100%渲染，于是颜色是白色；

*/

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

/**

* 深色颜色加一点浅一点颜色的阴影

*/

text-shadow: 1px 1px rgba(calc(var(--red) + 50), calc(var(--green) + 50), calc(var(--blue) + 50), calc((var(--lightness) - 0.5) * 9999));

/**

* 确定边框透明度。

* 如果亮度比0.8大，在说明按钮背景色比较淡，我们出现一个深色边框；

* 如果亮度比较小，说明按钮背景色较深，没有必要出现边框。

此时，计算后为负值，透明度小于0的时候，浏览器会按照0渲染，因此，边框透明。

*/

/* 设置边框相关样式 */

border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), calc((var(--lightness) - 0.8) * 100));

}

input {

vertical-align: middle;

margin-right: 10px;

}

.c-r::after {

counter-reset: red var(--red);

content: counter(red);

}

.c-g::after {

counter-reset: green var(--green);

content: counter(green);

}

.c-b::after {

counter-reset: blue var(--blue);

content: counter(blue);

}