Geek asks and answers

CSS - background color of contrasting foreground text

I have a column column that is colored by a percentage.

enter image description here

Part of the text is not displayed to the user, since it is white and falls into the white section. If I choose him, I will see him, but not otherwise -

enter image description here

Is there a way in css for displaying text as opposed to background color? Perhaps half of the text is in white and half of the text is black, so it will be visible to the user.

+5
source share
1 answer

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>
Run codeHide result

Jsfiddle

+6
source

More articles:


All Articles