black and white text based on background image with css

Question

I am trying to achieve this effect of a black and white text on a bi-colored header which is always white on a side, and with a background image on the other side (of different colors).

this is the css used for this example, which works only because the image has a solid black background:

.text {
  position: relative;
  color: rgb(255, 255, 255);
  mix-blend-mode: difference;
  text-transform: uppercase;
  font-size: 60px;
}

this doesn't work if the background image doesn't have a solid black background:

in this case i get what i'm supposed to get, but what i want is to get a white text on the left and a black text on the right, as in the first example.

i've been trying css filter, mix-blend-modess, clip-paths, i've seen this https://aerolab.github.io/midnight.js/ (it doesn't suit my case) but i always end up with the wrong result. do your know a way of making a black/white colored text that is aware of a white background and makes the text black and whatever is not a solid white background, switch the color to white?

i hope my explanation was clear, any solutions or even clues are very welcome, even if it needs javascript. thank you!

this is a codepen with the examples: https://codepen.io/vlrprbttst/pen/jOPMzvd?editors=1100

thanks so much!

Shifty

Does this answer your question? Text blended over background color – Softball

Answer 1

You can consider a gradient coloration for the text but you need to know the dimension of the image in order to correct set the values.

Here is an example with only the first section:

body {
  margin: 0;
  padding: 0;
}

header {
  height: 609px;
  background: 
   url("http://resources.doing.com/aaa/a.png") center right/auto 100% no-repeat;
  background-color: #fff;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 90px;
}

header>div {
  background: linear-gradient(to right, black calc(100% - 880px), white 0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text {
  text-transform: uppercase;
  font-size: 60px;
}

<header>
  <div>
    <div class="text" data-title="Elisa di Francisca">
      Elisa di Francisca
    </div>

    <div class="text" data-title="tenacia e determinazione">
      tenacia e determinazione
    </div>

    <div class="text" data-title="di una mamma in pedana">
      di una mamma in pedana
    </div>
  </div>
</header>

Argument

Answer 2

I tried something that seems to work.

I added one black layer (rgba with alpha 0.8) on top of your image with the same width, then filtered the brightness of your image with filter: brightness(3);

I am not sure whether it renders the image the way you want.

body {
	 margin: 0;
	 padding: 0;
}
header.second {
	 height: 609px;
	 background-image: url("https://thedefiant.net/wp-content/uploads/2019/10/22520100_1600239116694701_7307954682775296386_o.jpg");
	 filter: brightness(3);
	 background-position: center left;
	 background-repeat: no-repeat;
	 background-size: 600px 100%;
	 background-color: #fff;
	 border: 1px solid red;
	 display: flex;
	 align-items: center;
	 padding-left: 390px;
	 position: relative;
}
header.second .mask {
	 position: absolute;
	 left: 0;
	 top: 0;
	 background-color: rgba(0, 0, 0, 0.8);
	 width: 600px;
	 height: 100%;
}
header.second .text {
	 position: relative;
	 color: white;
	 mix-blend-mode: difference;
	 text-transform: uppercase;
	 font-size: 60px;
}
 

<header class="second">
  <div class="mask"></div>
  <div>
    <div class="text" data-title="Sono caduto, ho pianto.">
      Sono caduto, ho pianto.
    </div>
  
    <div class="text" data-title="poi sono risalito">
      poi sono risalito
    </div>
  
    <div class="text" data-title="sei mejo te!">
      sei mejo te! sei mejo te!
    </div>
  </div>
</header>

Nelia

unfortunatly the image gets darker and the text is all jaggered :/ this won't work for me but thanks for your help – Shifty