+ 按钮文字颜色随着背景色自动变化实例页面
+ 回到相关文章 » +
+
+
+
+ 效果：
+
+
+
+
+
+ 拖动滑块，改变RGB变量：
+R：
+G：
+B：
+
+
+ 代码：
+
+
+ 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 {
+ font-size: 150%;
+ padding: .5em 2em;
+ }
+ .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);
+
+ /**
+ * --lightness近似看成亮度，范围0~1，此时，和临界值--threshold做比较：
+ * 大于，则正数，和-999999%相乘，会得到一个巨大负数，浏览器会按照合法边界0%渲染，也就是亮度为0，于是颜色是黑色；
+ * 小于，则和-999999%相乘，会得到一个巨大的正数，以最大合法值100%渲染，于是颜色是白色；
+ */
+ color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
+
+ /**
+ * 确定边框透明度。
+ * 如果亮度比--border-threshold值大，在说明按钮背景色比较淡，我们出现一个深色边框；
+ * 如果亮度比较小，说明按钮背景色较深，没有必要出现边框。
+ 此时，--border-alpha计算后为负值，透明度小于0的时候，浏览器会按照0渲染，因此，边框透明。
+ */
+ --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));
+ }
+
+ HTML代码：
+<button class="btn">我是按钮</button> + + <p>拖动滑块，改变RGB变量：</p> + <p>R：<input type="range" min="0" max="255" value="44" name="red"></p> + <p>G：<input type="range" min="0" max="255" value="135" name="green"></p> + <p>B：<input type="range" min="0" max="255" value="255" name="blue"></p>+
JS代码：
+
+ var eleRanges = document.querySelectorAll('input[type="range"]');
+ Array.from(eleRanges).forEach(function (range) {
+ range.addEventListener('input', function () {
+ document.documentElement.style.setProperty('--' + this.name, this.value);
+ });
+ });
+
+