时间戳

首页 > 解决方案 > 根据背景设置颜色

css - 根据背景设置颜色

问题描述

我是 SCSS 的新手。我有以下代码：

.answers-post {
  float: left;

  .btn {
    background: white;

    &:hover {
      background: dark-light-diff($primary, $secondary, 65%, -75%);
      color: $secondary;
    }
  }
}

它将按钮的背景设置为白色。一些使用我们脚本的用户有白色背景。所以我想到了一个小想法——是否有可能以某种方式检查背景的颜色，如果它是一种白色，则不会将其设置为白色（不会设置任何颜色）。顺便说一句，我的意思是十六进制值在两个白色点之间（不确定哪个）。

如果这个问题听起来很奇怪，我很抱歉，我不太确定它在 scss 中是否是一个合理的想法，但从阅读文档来看，scss 是一个强大的工具，包含很多有趣的想法。

标签： csssass

解决方案

使用 javascript 检查 RGB 值的亮度：

var c = '#F48024'.substring(1);      // strip #
var rgb = parseInt(c, 16);   // convert rrggbb to decimal
var r = (rgb >> 16) & 0xff;  // extract red
var g = (rgb >>  8) & 0xff;  // extract green
var b = (rgb >>  0) & 0xff;  // extract blue

var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709

if (luma > 90) {
    // pick not white
}

推荐阅读