用背景颜色显示百分比栏 [英] Displaying percentage bar with background color

问题描述

例如，如果我有一个包含两列和两行的表：

  Col1百分比
 50 50 ％
 70 70％
  

如何用颜色填充百分比列表示COl1？像这样：

解决方案

您可以使用两个紧跟着两个站的线性渐变：

  .percentageFill {height：30px;背景：-webkit-linear-gradient（left，＃efe3af 75％，＃ffffff 75％）;背景：-moz-linear-gradient（left，＃efe3af 75％，#ffffff 75％）;背景：-ms-linear-gradient（left，＃efe3af 75％，＃ffffff 75％）;背景：-o-linear-gradient（left，＃efe3af 75％，＃ffffff 75％）;背景：线性渐变（向右，＃efe3af 75％，＃ffffff 75％）; border：1px solid black;}  

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

$ b 许多浏览器/版本都需要线性渐变的供应商前缀。

For example, if I have a table with two columns and 2 rows :

Col1       Percentage
50            50% 
70            70%

How do I fill the Percentage column with color represent the value of COl1 ? Something like this :

解决方案

You can use a linear gradient with two stops immediately following one another:

.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>

Remember many browser(s)/versions require a vendor prefix for linear-gradient.

这篇关于用背景颜色显示百分比栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！