CSS - 背景前景对比文本颜色

Question

我有一个条形列,按百分比值着色.

部分文本对用户不可见,因为它是白色的并且属于白色部分.如果我选择它我可以看到但不是 -

在css中是否有方法显示与背景颜色形成对比的文本？也许一半的文字是白色的,一半的文字是黑色的,所以用户可以看到.

Answer 1

我会做这样的事情:

.progressbarContainer
{
    position: relative;
    width: 100px;
    height: 15px;
    background: #ff00ff;
}
.backText
{
    position: absolute;
    left: 0;
    color: black;
}
.frontText
{
    position: absolute;
    left: 0;
    color: red;
}
.progressbar
{
    position: absolute;
    width: 14.34%;
    height: 100%;
    background: blue;
    overflow: hidden;
}

<div class="progressbarContainer">
    <div class="backText">
        14.34%
    </div>
    <div class="progressbar">
    <div class="frontText">
        14.34%
    </div>
    </div>

</div>

的jsfiddle