Css 如何在不影响文本的情况下对背景图像使用不透明度?
我试图在背景图像上使用不透明度,但如果我使用它,它也会影响文本Css 如何在不影响文本的情况下对背景图像使用不透明度?,css,background,opacity,Css,Background,Opacity,我试图在背景图像上使用不透明度,但如果我使用它,它也会影响文本 .content_wrapper{ width:320px; height:374px; color:black; background-image: url('../images/beuningse-boys-midden.png'); background-size:130px; background-repeat: no-repeat; background-position-x: 95px; background-posit
.content_wrapper{
width:320px;
height:374px;
color:black;
background-image: url('../images/beuningse-boys-midden.png');
background-size:130px;
background-repeat: no-repeat;
background-position-x: 95px;
background-position-y: 155px;
}
为文本指定一个类或id,并为其指定一种不带不透明性的颜色
p {
color: rgb(120,120,120); // use here what color you want
}
您不能使用CSS更改背景图像的不透明度。然而,也有办法达到同样的结果 此方法使用:after伪类,该类绝对位于其父类内部。背景图像与不透明度一起设置在这个伪元素上,给人的印象是背景不透明度是在背景本身上设置的 HTML
如果需要向后兼容,则需要在标记中添加一个额外的元素以实现相同的结果: HTML 下面是一篇很棒的文章,其中介绍了实现相同结果的CSS3方法:
示例-
背景色:rgba(0,0,0,0.5)代码>你可以通过这个链接来获得答案:-这是一个好问题,我觉得时间太长了。但我没有一个合适的答案。我使用两个div
来实现它。一个包含内容文本,另一个包含背景图像。用于此
<div>
Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>
div {
width:320px;
height:374px;
display: block;
position: relative;
border: solid 1px #f00;
}
div::after {
content: "";
background-image: url('http://placehold.it/800x600');
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
<div class="container">
<div class="background"></div>
Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>
.container {
width:320px;
height:374px;
display: block;
position: relative;
border: solid 1px #f00;
}
.container .background {
content: "";
background-image: url('http://placehold.it/800x600');
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}