css - 通过变量逐渐改变颜色

Question

我想在事情好、坏或介于两者之间时有一些视觉通知

假设我有一个介于 0 和 100 之间的数字，其中 100 是绿色(或其他一些预定义的颜色)，0 是红色(或其他颜色)

有没有办法得到 67 的颜色？ 34？ 98？只有 CSS

所以 67 在这种情况下，可以是 (67 * green + 33 * red)/100 或其他一些函数

另一种选择是制作渐变色(但那样就不是纯色了..)

Answer 1

目前，没有稳定的方法可以在 CSS 中做到这一点。 CSS calc() 属性可能是可行的方法，因为 W3C 规范包括您可以使用 attr() 中的值进行计算。截至目前，还没有浏览器支持两者的组合，但它看起来像这样

// HTML
<span class="color" data-val="67">67</span>

// CSS
.color {
  background-color: rgb(
    calc( (100 - attr(data-val)) / 100 * 255 ),
    calc( attr(data-val) / 100 * 255),
    0
  );
}

calc() 本身运行良好(在 Chrome (-webkit-) 和 Firefox (-moz-) 中带有前缀)，但用于计算的数字必须在 CSS 中设置(例如 width: calc(100% - 3em);).

在 calc() 完全支持 attr() 之前，您可能需要使用 javascript 来实现它，请参见下面的示例，其中 span 具有红色背景，内部 strong 元素具有绿色背景色。 Javascript 用于根据文本值设置背景不透明度。按运行代码片段查看结果。

$(document).ready(function() {
    $('.color').each(function() {
        $(this).children('strong').css('background-color', 'rgba(0,255,0,'+(parseInt($(this).text()) / 100)+')');
    });
});

.color {
    display: inline-block;
    margin: 5px;
    text-align: center;
    border: 1px solid #000;
    background: #c00;
}
strong {
    display: inline-block;
    padding: 15px;
    color: #fff;
    text-shadow: 0 0 5px #000;
    font-family: Arial;
    font-size: 1.2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="color"><strong>100</strong></span>
<span class="color"><strong>67</strong></span>
<span class="color"><strong>33</strong></span>
<span class="color"><strong>25</strong></span>
<span class="color"><strong>0</strong></span>