CODEWITHSUNDEEP
csstextcolorsbackgroundforeground
blue01
blue01

Reputation: 2095

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.

Upvotes: 5

Views: 4418

Answers (1)

David Rettenbacher
David Rettenbacher

Reputation: 5120

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

Upvotes: 5

Related Questions