通过特定百分比覆盖背景颜色

Question

通过特定百分比覆盖背景颜色

phphtmlcssbackgroundpercentage

6

我正在使用foreach向一个<table>中添加行。

在某些情况下，根据PHP中计算的百分比，我想让单元格具有灰色背景。

例如：50％表示单元格背景的一半将是灰色的，其余部分将保持空白| 33.33％=背景的1/3等等。

我遇到的问题是，如果我将颜色应用于<td>，则<td>中的文本会被其他div拉伸，我也会覆盖之后的文本等等。

以下是代码：

$percent = 1/3; // For example
$percent_friendly = number_format( $percent * 100, 2 ); //This will return 33.33

echo '<td>'.$percent_friendly.' %
    <div style="background-color: grey"> // So I want the grey to fill 33.33% of the space
    </div>
    <div style="background-color: white">
    </div>
</td>';

目前为止应用的样式：

table {
    margin-left:auto; 
    margin-right:auto;
    font-size:18px;
}

table, th, td {
    text-align: center;
    border: 1px solid black;
    position:relative;
}

我可能忽略了什么，但是 CSS 不是我的强项，希望您能给予解释或帮助。非常感谢。

- Nirnae

所以你想模拟一个进度条。 - Vicente Olivert Riera

@VicenteOlivertRiera 是的，但是由于数据不会移动，所以需要一个固定的进度条。 - Nirnae

在那个div里面创建另外两个div，第一个div具有灰色背景，并且根据该百分比给它们设置宽度，怎么样？ - Vicente Olivert Riera

这是我根据您在回显中看到的内容提出的最后一个想法，但他们继续拉伸位于上面<td>的文本。 - Nirnae

1

另一个想法是将灰色像素图像设置为td的背景，并使用css background-size属性来实现您想要的效果。 - Vicente Olivert Riera

3个回答

2

在PHP中：

echo "
<td>
    <div class='progress-bar' style='width: $percent_friendly%'></div>
    <span>$percent_friendly%</span>
</td>";

在CSS中：

td               { position: relative; }
td .progress-bar { position: absolute; background: grey; top: 0; bottom: 0; left: 0; }
td span          { position: relative; }

这样做可以将任何结构/字体样式应用于td元素，进度条会自动正确调整。

- cdrini

0

如果您不介意看起来有点混乱，可以使用线性渐变作为背景颜色：

echo '<td style="background: linear-gradient(to right, grey 0%,grey '.$percent.'%,white '.$percent.'%,white 100%);">'.
            $percent_friendly.'%'.
     '</td>';

请注意，这在IE9及以下版本中无法正常工作。

- Jeppe Stougaard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andreas · Accepted Answer

这里有一个简单的解决方案，使用两个固定宽度的div。百分比直接插入标记中。通过将<p>设置为绝对位置，您不应该遇到拉伸td的问题。

table {
  border: 1px solid;
}
td {
  height: 50px;
}
.progress {
    padding:0;
    width: 200px;
    border: 1px solid #555; 
    background: #ddd;
    position: relative;
}
.bar {
    height: 100%;
    background: #57a; 
}
.bar p {
    position: absolute;
    text-align: center;
    width: 100%;
    margin: 0;
    line-height: 30px;
}

<table>
    <tr>
        <td class="progress">
            <div class="bar" style="width: 33.33%"><p>33.33% complete</p></div>
        </td>
    </tr>
    <tr>
        <td class="progress">
            <div class="bar" style="width: 16.66%"><p>16.66% complete</p></div>
        </td>
    </tr>
    <tr>
        <td class="progress">
            <div class="bar" style="width: 66.66%"><p>66.66% complete</p></div>
        </td>
    </tr>
</table>

应该适用于所有浏览器，因为它只使用元素的宽度。