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