Change text color if background image is not white?

Question

I have read a lot articles about this but haven't found anything to solve my problem.

Is it possible somehow to change text color based on background image with Jquery or/and CSS?

I have to make a responsive website with this requested, but got stuck.

Answer 1

An idea is to color the text with an inverted background.

Here is an idea considering radial-gradient:

.box {
  padding: 50px;
  background: radial-gradient(circle at 70% 0px, #fff 45%, purple 45.5%) fixed;
}

p {
  font-size: 25px;
  font-weight: bold;
  /*Should be the same background but inverted color*/
  background: radial-gradient(circle at 70% 0px, purple 45%, #fff 45.5%) fixed;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="box">
  <p>Some text here Some text here Some text here Some text here </p>
</div>

In your case, the background seems to be an image so you simply need to find a gradient that is similar where you can invert the colors.

Another Idea is to use a basic image and add an overlay to create the result:

.box {
  padding: 50px;
  background: 
   radial-gradient(circle at 70% 0px, #fff 35%, rgba(27, 128, 0, 0.6) 35.5%),   
   url(https://picsum.photos/500/800?image=1069) center/cover;
  background-attachment:fixed;
}

p {
  font-size: 25px;
  font-weight: bold;
  /*Should be the same background but inverted color*/
  background: radial-gradient(circle at 70% 0px, rgba(27, 128, 0, 1) 35%, #fff 35.5%) fixed;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="box">
  <p>Some text here Some text here Some text here Some text here </p>
</div>