2

在此处输入图像描述

尝试使用 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%);
}

小提琴

4

1 回答 1

5

如果您只想像您的示例演示的那样点亮，请叠加 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/>的 style 属性中设置值来设置样式。顺便说一句：我将文本更改display: table-cell为block并添加line-height到垂直居中。这应该在这种情况下工作，因为没有换行符。除此之外，position: relative对表格单元格不执行任何操作。

这是一个演示。

于 2013-05-24T21:36:33.707 回答