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>

Answer 2

使用CSS执行此操作的唯一方法是为每种可能的颜色编写一个类。 Sass可以提供帮助的唯一方法是以编程方式生成所有类：

@for $i from 0 through 100 {
  .foo-#{$i} {
    background: mix(red, green, $i * 1%);
  }
}

通过JavaScript可以更有效地解决此任务。

Answer 3

你可以但它需要SASS或LESS或其他允许CSS变量的预处理器

SASS

$value: 0;
$green: 255*($value/100);
$red:255*((100-$value)/100);


div {
  width:100px;
  height:100px;
  margin:10px;
  background:rgb($red, $green , 0);
}

SassMeister Demo

变量逐渐变色

3 个答案: