按钮文字颜色随着背景色自动变化实例页面

回到相关文章 »

效果:

拖动滑块,改变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);    
    });
});