如果背景图像不是白色，是否更改文本颜色？
如果背景图像不是白色，是否更改文本颜色？
提问于 2018-07-10 06:12:28
我已经读了很多关于这方面的文章，但还没有找到任何解决我的问题的方法。
有没有可能用Jquery或/和CSS根据背景图像改变文本颜色？
我必须与此要求，但卡住了一个响应式的网站。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-10 06:20:22
一个想法是用反转的背景给文本上色。
这里有一个考虑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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51254727
复制相关文章
相似问题