例如,如果我有一个包含两列和两行的表格:
Col1 Percentage
50 50%
70 70%
如何用代表 COl1 值的颜色填充百分比列?像这样的东西:
最佳答案
您可以使用线性渐变,两个停靠点紧接在一起:
.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
的供应商前缀。
关于html - 显示带背景色的百分比条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26800577/