根据数值自动背景颜色

Question

上下文

我正在寻找一种根据数值制作自动背景颜色的方法。

在我的示例中，颜色从绿色到红色不等，具体取决于百分比：

问题

我只需要 css ，或者我还需要 javascript ？

实施例

您可以使用此标记：http://jsfiddle.net/3J3Yb/1/。

Answer 1

脱离约瑟夫的解决方案：

红色是（255,0,0）;黄色是（255,255,0）;绿色是（0,255,0）。因此，如果您希望渐变经历黄色，则需要逐渐将绿色增加到100％，然后将红色减少到0。

http://jsfiddle.net/mblase75/Xw3JL/1

$(".percentVals td").each(function(){
    var r = Math.min(100,parseInt(this.innerHTML,10)*2);
    var g = Math.min(100,200-parseInt(this.innerHTML,10)*2);
    this.style.backgroundColor = "rgb(" + r + "%," + g + "%,0%)"
});

Answer 2

你的意思是什么？

http://jsfiddle.net/Xw3JL/

需要调整

Answer 3

不确定是否可以自动执行，但我认为你可以硬编码100％到90％=绿色，90％到80％=黄色。

此网站使用您想要的步数自动渐变：http://www.perbang.dk/rgbgradient/

希望它会对你有所帮助:)。

Answer 4

如果你想纯粹用CSS做，你应该根据它们的百分比给它们所有的类：

<table>
    <tr>
        <td class="level-100">100%</td>
        <td class="level-90">90%</td>
        <td class="level-80">80%</td>
        <td class="level-70">70%</td>
        <td class="level-60">60%</td>
        <td class="level-50">50%</td>
        <td class="level-40">40%</td>
        <td class="level-30">30%</td>
        <td class="level-20">20%</td>
        <td class="level-10">10%</td>
        <td class="level-0">0%</td>
    </tr>
</table>

这样你就可以用简单的CSS设置它们的样式：

.level-100      { background-color: #E50012; }
.level-90       { background-color: #E11900; }
.level-80       { background-color: #DD4500; }
.level-70       { background-color: #D96F00; }
.level-60       { background-color: #D59700; }
.level-50       { background-color: #D2BE00; }
.level-40       { background-color: #B8CE00; }
.level-30       { background-color: #8DCA00; }
.level-20       { background-color: #63C600; }
.level-10       { background-color: #3AC200; }
.level-0        { background-color: #14BF00; }

这是小提琴：http://jsfiddle.net/3J3Yb/4/

Answer 5

通过CSS执行此操作听起来你必须编写更多代码，因此我建议使用JS来完成它。

以下是红色渐变的示例：http://jsfiddle.net/3J3Yb/3/

和JS：

$('td').each(function(){
    var $this = $(this);
    var decimal = parseInt($this.text(),10) / 100;
    var red255 = Math.round(255 * decimal)
    $this.css('background-color','rgb(' + red255 + ',0,0)');
});

这将为您提供所有可能的颜色，颜色更改间隔为17（每个r为15个不同的颜色值，g，b - 255/17 = 15）：http://jsfiddle.net/3J3Yb/6/

它只是15个组内的平滑渐变，因为它只在15个组内，两个颜色保持不变。代码非常简单：

var tr = $('tr');

for(var r = 0; r < 256; r+=17){
    for(var g = 0; g < 256; g+=17){
        for(var b = 0; b < 256; b+=17){
            var rgb = r+','+g+','+b;
            tr.append('<td style="background:rgb('+rgb+')"></td>');
        }
    }
}