如何在不影响文本的情况下更改背景图像的不透明度?

Question

• 这只是一个没有bg图像的虚拟示例，但如果我确实有一个背景图像，我如何实现改变图像不透明度而不影响文本的目标?

下面是一个代码示例:HTML:

<div class=bg-img>
<p> Lorem Ipsum. </p>
</div>

CSS:

.bg-img {
background-img: url();
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0.8;
}

p {
color: white;
}

Answer 1

所以我不认为你所要求的是直接可能的，但这里有一个方法来获得你正在寻找的效果。

将你的内容与包含背景的div分开。然后将它们都包装在一个容器div中，并将该div设置为position: relative;

现在把你的内容，并给它这个代码:

position: absolute;
top: 0; 
left: 0;

看我做了什么:

.bg-img {
background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.VKpiZHX8o1MQRM3NLjQaGQHaE8%26pid%3DApi&f=1&ipt=46d3f722b06b0265f5e520392239e52a3b5e8a19f77a81b52fea18d43b5df116&ipo=images);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 250px;
opacity: 0.5;
}
.contain {
position: relative;
}

.contain p {
position: absolute;
top: 0; 
left: 0;
}

<div class="contain">
<div class=bg-img></div>
<p> Lorem Ipsum. </p>
</div>