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

Question

我的 CSS 很差，我需要为我完成一些复杂的事情。

我有一个包含数据的表格，我有一列，其中有类似 Qty Assigned / Qty Requested 的内容.我计算分配的百分比，所以 10 个分配的 5 个将是 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-quarters {
  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-quarters">75%</td>
  </tr>
</table>

零 0 第二个值是有意使用的，以避免重复第一个值。这是可行的，因为梯度中的下一个值不能小于前一个值。