如果背景图片不是白色,是否更改文字颜色? [英] Change text color if background image is not white?
问题描述
我已经阅读了很多有关此的文章,但没有找到任何解决我的问题的方法.
I have read a lot articles about this but haven't found anything to solve my problem.
是否可以通过Jquery或/和CSS根据背景图像更改文本颜色?
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.
推荐答案
一个想法是使用反转的背景为文本着色.
An idea is to color the text with an inverted background.
这里是考虑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>
这篇关于如果背景图片不是白色,是否更改文字颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!