我正在尝试在背景图像上使用不透明度，但是如果我使用它，它也会影响文本。
.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;
}
您无法background-image使用CSS更改的不透明度。但是，有一些方法可以达到相同的结果。
此方法使用：after伪类，该类绝对位于其父类内部。背景图像与不透明度一起设置在该伪元素上，给人的印象是背景不透明度设置在背景本身上。
<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;
}
这是一篇很棒的文章，介绍了使用CSS3方法实现相同结果的方法：
http://css-tricks.com/snippets/css/transparent-background-images/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句