CSS渐变:模拟进度条

Question

尝试使用css模拟此进度条.它有两个背景,其中一个背景应该只覆盖文本后面的栏的一部分.它的宽度应该易于操作以改变%.我从一个完整的栏开始,但真的不确定如何添加百分比部分.有可能没有绝对定位吗？

<div class="bar">
    Progress: 60%
</div>

.bar {
    border: 1px solid black;
    color: white;
    display: table-cell;
    width: 250px;
    height: 50px;
    text-align: center;
    vertical-align: middle;        
    background: #003458;
    background: -moz-linear-gradient(top, #003458 0%, #001727 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003458), color-stop(100%,#001727));
    background: -webkit-linear-gradient(top, #003458 0%,#001727 100%);
    background: -o-linear-gradient(top, #003458 0%,#001727 100%);
    background: -ms-linear-gradient(top, #003458 0%,#001727 100%);
    background: linear-gradient(to bottom, #003458 0%,#001727 100%);
}

小提琴

Answer 1

如果您只是想像示例演示一样轻松,请覆盖2个渐变:

.bar {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 60%),
                linear-gradient(to bottom, #003458 0%,#001727 100%);
}

这是一个演示.(删除了供应商前缀,您应该在最终代码中再次添加它们)

但问题是,你怎么知道酒吧应该有多大？您可以为每个值创建多个类,或者为此使用JavaScript,但当然两种解决方案都不好.所以像其他人说:使用内在元素:

<div class="bar">
    <p>Progress: 60%</p>
    <span style="width: 60%"></span>
</div>

CSS:

.bar {
    position: relative;
    border: 1px solid black;
    color: white;
    display: block;
    width: 250px;
    text-align: center;
    vertical-align: middle;
    height: 50px;
    line-height: 50px;
    background: linear-gradient(to bottom, #003458 0%,#001727 100%);
}

.bar > span {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
}

.bar > p {
    display: inline;
    position: relative;
    z-index: 1;
}

这样,您可以通过设置样式值width的范围内<span/>的样式属性.顺便说一句:我改变了display: table-cell对block并添加line-height垂直居中的文本.这应该适用于这种情况,因为没有换行符.除此之外,position: relative对表格单元格没有任何作用.

这是一个演示.