根据百分比设置 div 背景颜色（如进度条）答案

【问题标题】：Set div background color based on a percent (like progress bar)根据百分比设置 div 背景颜色（如进度条）
【发布时间】：2018-12-30 13:07:47
【问题描述】：

我有一个带有一些文本和百分比值的 div（例如它是 78%）我想将百分比可视化为带有原始文本的 div 的背景颜色。它必须填充原始 div 的所有空间，而不是 div 中的一行

<div class="my-div">
    <div class="???" style="width: 78%"></div>
    My text
</div>

【问题讨论】：

标签： html css bootstrap-4 progress-bar

【解决方案1】：

我找到了这个解决方案：

<div class="progressbar-wrapper">
    Some text
    <div class="progressbar" style="width: 78%"></div>
</div>

.progressbar-wrapper {
    position: relative;
    z-index: 1;
}

.progressbar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: #dcf3dd;
    z-index: -1;
}

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>


 <div style="height:20px; ">
        My text
</div>
<div style="height:50px;width:500px;background-color:grey;">
    <div class="???" style="width: 78%;background-color: brown;height: inherit;">this is a progress bar</div>
</div>


</body>
</html>

【讨论】：

“我的文字”必须在主 div 和进度条上方。现在它在下面。