Question

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

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

Answer 1

<!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>

Answer 2

我找到了解决方法：

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

}

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

2 个答案: