CSS背景大小不适用于静态颜色 [英] CSS Background-Size doesn't work with static color

问题描述

我得到了一个包含数据的表格，并且我有一个列，其中有我喜欢的东西分配的数量/请求的数量。我计算了分配的百分比，所以5分配的10将是50％。现在，我想为背景色添加与<％c $匹配的 TD 。因此，50％将是TD的一半，让我们说红色。

我曾尝试使用 background-color：red; background-size：<？php echo $ BgPct; ？>％; 但它不起作用。

任何人都有解决方案吗？我可以使用任何东西。我也有jQuery。我不在乎是否是CSS1 / 2/3，但它需要准确，所以66％不是75％的背景图片。

解决方案

您可以在另一个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> 
  

I am very bad in CSS and I need to accomplish something complicated for me.

I got a table with data and I have a column where I have something like Qty Assigned / Qty Requested. I calculate the % assigned so 5 assigned of 10 will be 50%. Now, I want to put a background-color on the TD who match the %. So 50% will be half of the TD in let's say red.

I have tried to use background-color: red; background-size: <?php echo $BgPct; ?>%; but it doesn't work.

Anyone have solutions ? I can use whatever. I have jQuery also. I don't care if it's CSS1/2/3, but it need to be accurate so 66% isn't a background picture of 75%.

解决方案

You can place a div inside another div. Make both divs have the same height. The inner div will have a background color (red). Then you can set the width of the div some % and thats how much it will be filled in.

This is how twitter bootstrap implements its progress bars. If you want a vertically filling bar I think you can set the height to a % and make the widths the same.

Here is the twitter bootstrap example:

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

Click the details tab to see the source code.

A basic implementation example:

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

这篇关于CSS背景大小不适用于静态颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！