CSS Background-Size不适用于静态颜色

Question

我在CSS中非常糟糕,我需要为我完成一些复杂的事情.

我有一个数据表,我有一个列,我有类似的东西Qty Assigned / Qty Requested.我计算分配的%,因此5分配的10将是50%.现在,我想在TD匹配%的人身上加上背景颜色.因此50%将是TD的一半,让我们说是红色.

我试过使用background-color: red; background-size: <?php echo $BgPct; ?>%;但它不起作用.

谁有解决方案？我可以用任何东西.我也有jQuery.我不在乎它是否是CSS1/2/3,但它需要准确,所以66%不是75%的背景图片.

Answer 1

你可以用linear-gradient它

例如,如果您需要50%的红色

td {
  background: linear-gradient(to right, red 50%, transparent 0);
}

演示:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid gray;
  padding: 10px;
}

.half {
  background: linear-gradient(to right, red 50%, transparent 0);
}

.one-third {
  background: linear-gradient(to right, red 33.33%, transparent 0);
}

.three-quaters {
  background: linear-gradient(to right, red 75%, transparent 0);
}

<table>
  <tr>
    <td class="half">50%</td>
  </tr>
  <tr>
    <td class="one-third">33%</td>
  </tr>
  <tr>
    <td class="three-quaters">75%</td>
  </tr>
</table>

0故意使用零秒值以避免重复第一个值.这是有效的,因为渐变中的下一个值不能小于之前的值.

Answer 2

您可以将一个 div 放在另一个 div 中。使两个 div 具有相同的高度。内部 div 将具有背景颜色（红色）。然后你可以将 div 的宽度设置为 % ，这就是它将被填充的数量。

这就是 twitter bootstrap 实现其进度条的方式。如果你想要一个垂直填充条，我认为你可以将高度设置为 % 并使宽度相同。

这是 Twitter 引导程序示例：

http://cssdeck.com/labs/twitter-bootstrap-progress-bars

单击详细信息选项卡以查看源代码。

一个基本的实现示例：

<div style="width:50%">
    <div style="width: 50%; background-color:red; text-align:center">Hello</div>
</div>