假设我有一个 100px 的 div,它一直都是文本。
我如何设置 div 的样式,使其部分由左到右填充颜色,例如红色和 div 的其余部分是另一种颜色?当我说填充时,我指的是背景,所以文本仍然可见。
最佳答案
.gauge {
position: relative;
width: 100px;
height: 25px;
background: #7785AC;
}
.value {
position: absolute;
top: 0;
left: 0;
width: 35%;
height: 100%;
background: #5B2A86;
margin: 0;
padding: 0;
z-index: 0;
}
.text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
text-align: justify;
margin: 0;
padding: 0;
z-index: 1;
}
<div class="gauge">
<span class="value"></span>
<span class="text">yourText</span>
</div>
关于css - 使用 css 测量 div(如条形图),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7311311/