Change text color based on its background

Question

So, I was practicing in HTML and CSS as usual and yesterday I started working on a PSD template. It seemed easy for me, but in a few seconds, I bunched in the issue that I am talking about right now.

In general, I want to change the exact part of a text based on its background. I've already tried "mix-blend-mode", but unfortunately, the result wasn't satisfying for me.

Here is what I want. enter image description here

So, as you can see the text before the center is white-colored, but the text after the center has the same color as the background before the center. Is there any way to do that using CSS or maybe even Javascript.

This also uses `mix-blend-mode` but it adapts to the background which is moving in this post. it also uses sass which is a css extension https://css-tricks.com/reverse-text-color-mix-blend-mode/ Does it answer your question? — Nemoko, Mar 16 '22 at 08:20

score 0 · Accepted Answer · answered Mar 16 '22 at 08:59

You could do something like this:

<style>
.container {
    display:block;
    position:relative;
    width:150px;
    height:50px;
    text-align: center;
}
.black-half div {
    background: #000;
    color: #fff;
}
.white-half div {
    background: #fff;
    color: #000;
    width:150px;
}
.white-half {
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: absolute;
}
.black-half {
    height: 100%;
    position: absolute;
}
</style>

<div class="container">
  <div class="black-half">
      <div>Split background and text color</div>
  </div>
  <div class="white-half">
      <div>Split background and text color</div>
  </div>
</div>

Change text color based on its background

1 Answers1