如果背景圖像不是白色，請更改文字顏色？

Question

我已經閱讀了很多關於此的文章，但沒有找到任何解決我問題的方法。

是否有可能以某種方式使用Jquery或/和CSS更改基於背景圖像的文本顏色？

我必須根據要求建立一個響應式網站，但卡住了。

Answer 1

一個想法是用反轉的背景為文本着色。

這是一個考慮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> 

在您的情況下，背景似乎是一個圖像，因此您只需要找到一個類似於可以反轉顏色的漸變。

另一個想法是使用基本圖像並添加疊加層來創建結果：

 .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>