Harpreet Harpreet -3 years ago 196
CSS Question

CSS - background foreground contrast text color

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

enter image description here

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-

enter image description here

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.

Answer Source

I would do something like this:

.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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download