CSS - 创建一个进度指示器

Question

CSS - 创建一个进度指示器

4

我希望能够展示一个特定的CSS样式，我试图达到的目标是：使用两种颜色的字体来显示完成进度条指示器。

目标是要展示类似这样的效果：http://jsfiddle.net/ddz86cr3/，但这个例子有像素边框。

我使用了问题Two-tone font coloring in CSS? 来创建一个近似的效果： HTML：

<div>
    <span id="span1">15%</span>
    <span id="span2">15%</span>
    &nbsp;
</div>

CSS

div {
    position: relative;   
    color: green;
    font-size: 50px;
    font-family: Georgia;
    width: 500px;
    border: 1px solid green;
}
div span#span1 {
    display: inline-block
    height: 100%; 
    width: 100%;
    position: absolute;
    color: green;
    background-color: white;
    overflow: hidden;  
    text-align: center;
}
div span#span2 {
    display: inline-block
    height: 100%; 
    width: 15%;
    border-left: 200px solid green;
    position: absolute;
    color: white;
    background-color: green;
    overflow: hidden;   
}

请看示例：http://jsfiddle.net/va3whf86/ 这个示例非常好用，很接近我想要的，只是它没有居中。

解决方案：

我使用了Midas在问题“有没有办法在网页上通过字符的一半改变文本颜色？”中提出的解决方案的修改版本。我的版本没有JavaScript，并且有真实的颜色。

下面是代码：http://jsfiddle.net/ytt2r2sa/ HTML：

<span class="progressbar">
    <span>50%</span>
    <strong style="width: 50%;">
        <em>50%</em>
    </strong>
</span>

CSS

.progressbar, .progressbar strong {
    display:block;
    height:1.2em
}
.progressbar, .progressbar em {
    width:10em
}
.progressbar strong, .progressbar em {
    position:absolute;
    top:0;
    left:0
}
.progressbar {
    color:green;
    background:window;
    border:1px solid green;
    text-align:center;
    position:relative
}
.progressbar strong {
    background:green;
    width:0;
    font-weight:normal;
    overflow:hidden
}
.progressbar em {
    color:white;
    font-style:normal
}

- Thibault

像这样 http://jsfiddle.net/j08691/k0fyj2qr/? - j08691

3

为什么不直接给一个“进度条”元素添加样式呢？ - James Taylor

请听@JamesTaylor的建议 - http://css-tricks.com/html5-progress-element/ - Luke

1

可能是重复的问题：有没有办法在网页上改变文本“一半”的颜色？ - Oriol

@Oriol 谢谢！我使用了那个问题中一个解决方案的修改版本。 - Thibault

@JamesTaylor 谢谢你提供这个我之前不知道的元素。但是它似乎很难正确地进行样式设置，而且目前浏览器的支持还不够完善。遗憾的是，那本来是完美的方式。 - Thibault

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- geeves · Accepted Answer

一种方法是创建一个 DIV 并将百分数放在其中。

http://jsfiddle.net/va3whf86/9/

<div>
<span id="span1">&nbsp;</span>
<span id="span2">&nbsp;</span>
<div id="text1">15%</div>
&nbsp;
</div>

并添加以下CSS：

#text1 {
width: 100%;
text-align: center;
display: inline-block;
position: absolute;
}