What CSS can I use to allow the text to be readable no matter what is behind it?

Question

In the following example, I demonstrate the issue where the colors are perfect, except for portions at different %'s results in some or all of the text being obscured.

What I would like to achieve, is to somehow assign the font color to be the difference of the background. I recall seeing something many years ago in DHTML which allowed for this. The result I am looking for is as follows

• In the 50% sample, the '5' would be in white, and the '0' would be in black.
• In the 75% sample, the '75' would be in white.
• In the 20% sample, the '20' would be in black.

I believe there is a way to do this using CSS/CSS3, but I am unable to locate information on it.

The resulting style information should be contained inside the 'p' style in the CSS file. No 'tricks' like splitting data or altering the HTML using JavaScript / etc. The number inside the <p> element should remain whole and in tact.

body {
  background: #000000; 
}

p {
 background: #ffffff;
 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAA1BMVEVilQmZw+RvAAAAAXRSTlOF3TSvyQAAAD1JREFUeNrtwQENAAAAwqD3T20PBxQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPBmnQgAAd4aVNwAAAAASUVORK5CYII=");
 background-repeat: repeat-y;
    background-size: 0% auto;
 color: #ffffff;
 padding: 5px;
 text-align: center;
 border: 1px solid #3E8096;
 display: block; 
}

<p style="background-size: 50% auto !important">50</p>
<p style="background-size: 75% auto !important">75</p>
<p style="background-size: 20% auto !important">20</p>

Note:

I was considering a drop-shadow, however this would result in a funny looking font when it is a white font. I also considered encapsulating the text in a border, however the ideal result would be for the font to adjust based on background.

Answer 1

body { background: navy }

div {
    background-color: white;
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    font-size: 50px;
    text-align: center;
    position: relative;
    color: red;
}

span {
    content: '';
    position: absolute;
    background: cyan;
    width: 50%;
    top: 0;
    left: 0;
    height: 100%;
    display: inline-block;
    mix-blend-mode: difference;
}

<div>
   0000 <span></span>
</div>

body { background: navy }

div {
    background-color: white;
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    font-size: 50px;
    text-align: center;
    position: relative;
    color: red;
}

div:after {
    content: '';
    position: absolute;
    background: cyan;
    width: 50%;
    top: 0;
    left: 0;
    height: 100%;
    display: inline-block;
    mix-blend-mode: difference;
}

<div>00000</div>