如果背景图像不是白色，则更改文本颜色？答案

【问题标题】：Change text color if background image is not white?如果背景图像不是白色，则更改文本颜色？
【发布时间】：2018-12-17 16:18:36
【问题描述】：

我已经阅读了很多关于此的文章，但没有找到任何可以解决我的问题的东西。

是否有可能使用 Jquery 或/和 CSS 以某种方式根据背景图像更改文本颜色？

我必须根据这个请求创建一个响应式网站，但卡住了。

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：