background foreground contrast text color

I have a bar column which is colored by percentage value.

Part of the text is not visible to the user since it is white and falls in the white section. If i select it i can see it but not otherwise-

Is there way in css to show the text in contrast to the background color? Maybe half the text is in white and half the text is in black, so it would be visible to the user.

---

我会做这样的事情：

.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>

链接地址: http://www.djcxy.com/p/88938.html

上一篇: 基于背景的反向文本颜色

下一篇: 背景前景对比文本颜色