如果背景图像不是白色，请更改文字颜色？

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>