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