Question

我想展示一个我想要实现的特定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/

这个很好用，非常接近我想要的，除非它不是中心。

解

我在问题Is there any way to change the color of text "halfway" through a character on a webpage?中使用了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
}

Answer 1

一种方法是创建DIV并将％放在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;
}

CSS - 创建进度指示器

1 个答案: