显示背景颜色的百分比栏

Question

例如,如果我有一个包含两列和两行的表:

Col1       Percentage
50            50% 
70            70%

如何填充百分比列,颜色代表COl1的值？像这样的东西:

Answer 1

您可以使用线性渐变,其中两个停靠点紧跟在一起:

.percentageFill{
    height:30px;

    background: -webkit-linear-gradient(left, #efe3af 75%,#ffffff 75%);
    background:    -moz-linear-gradient(left, #efe3af 75%, #ffffff 75%);
    background:     -ms-linear-gradient(left, #efe3af 75%,#ffffff 75%);
    background:      -o-linear-gradient(left, #efe3af 75%,#ffffff 75%);
    background:         linear-gradient(to right, #efe3af 75%,#ffffff 75%);

    border:1px solid black;
}

<div class='percentageFill'>75%</div>

请记住,许多浏览器/版本需要供应商前缀linear-gradient.