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

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

5493

2017-07-31 19:13

起源

background-size 是图像，而不是背景颜色。 - Diodeus - James MacFarlane

也许你可以尝试一些红色背景图像，然后使用背景大小。 - Miljan Puzović

@MiljanPuzović你的意思是我用TD的高度创建一个图像，然后用％来调整宽度？ - David Bélanger

这样的事情。或者尝试重复bg图像。重要的部分是背景大小，您只能使用图像。 - Miljan Puzović

@MiljanPuzović即使我找到了另一个解决方案，也值得一试。图像％正在运行。 - David Bélanger

答案:

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

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

这是twitter bootstrap示例：

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>

2017-07-31 19:20

我把文字放在内心？带有X％的div和另一个带有文本相同属性的浮动悬停？ - David Bélanger

是的，您可以在内部div中放置文本。 - Calvin Jia

您的技术工作正常，但文本空间也与宽度空间相同。如果width为0％，则文本将溢出。这就是我用它来管理它的方法： <td style="padding: 0; margin: 0;"><div style="float: left; width: 50%;"><div style="width: 100%; height: 34px; background-color: lightgray; text-align:center"> </div></div><div style="float: left; position: absolute; padding: 8px;">25 / 50</div></td> - David Bélanger

正如评论中所建议的那样，我在单个像素方面取得了很大的成功 background-image 拉伸到适当的百分比 background-size 表格单元格。这适用于所有现代浏览器（IE9 +）。

这具有优势（超过使用额外的 div 包含“彩色条”的元素，它独立于您可能想要应用于表格单元格的任何其他样式，例如 text-align如果使用百分比，它将自然地出现在单元格内容的后面并弯曲以填充表格单元格。

CSS：

td.bargraph {
    background:transparent url(/img/dot-green.gif) 0 center no-repeat;
    text-align: center;
}

HTML：

<td class="bargraph" style="background-size:<?=$perc?>% 80%"><?=$perc?>%</td>

哪里 $perc 是你计算的百分比。

2018-06-08 18:50

您可以使用 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 故意使用第二个值以避免重复第一个值。这是有效的，因为渐变中的下一个值不能小于之前的值。

2017-12-04 12:47

有趣的问题。我会放一个 div，每个都在里面 td你想要效果。然后使用jQuery获取内部的数字（字符串） td 并将其变为一个变量，然后您可以使用它来设置变量的宽度 div。

2017-07-31 19:20

是的，它会起作用。但您必须考虑在TD中需要应用文本。 - David Bélanger

是的，我想你也会将文本放入div中 - dezman

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

答案:

CSS：

HTML：

热门问题