html - 显示带背景色的百分比条

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 的供应商前缀。