<分区>
<分区>
我的背景图片和文字有问题。我只想将不透明度应用于背景图像，但我的文本受到了影响。
HTML
<div class="content">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
CSS
.content{
background: url(../img/103_n.jpg) left top no-repeat, url(../img/103_n.jpg) right bottom no-repeat;
opacity: 0.5;
}
.content .box p{
opacity: 1;
}
最佳答案
没有背景不透明度属性，但你可以用伪元素伪造它:
.content {
position: relative;
}
.content::after {
content: "";
background: url(../img/103_n.jpg) left top no-repeat, url(../img/103_n.jpg) right bottom no-repeat;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
关于html - 不影响文本的背景图像不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55118557/