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

Question

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

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

Answer 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;
}