gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:38:54 26 4
gpt4 key购买 nike

我的 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% 的背景图片。

最佳答案

你可以为此使用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 第二个值是有意使用的,以避免重复第一个值。这是可行的,因为梯度中的下一个值不能小于前一个值。

关于html - CSS Background-Size 不适用于静态颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50532047/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com