如何在不影响文本的前提下调整背景图片的透明度？

你当前的问题是给容器设置opacity会让内部文本也继承半透明效果，下面提供两种可靠的解决方法：

方法一：使用伪元素承载背景图 #

通过给容器添加一个伪元素，将背景图放在伪元素上，再单独给伪元素设置透明度，容器内的文本就不会受影响。

修改后的代码如下：

HTML #

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

CSS #

.bg-img {
  position: relative; /* 让伪元素相对于容器定位 */
}

/* 伪元素作为独立的背景层 */
.bg-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("你的图片地址"); /* 填入实际图片URL */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.8; /* 仅给背景图设置透明度 */
  z-index: -1; /* 将背景层放在文本下方 */
}

p {
  color: white;
  position: relative; /* 确保文本层级高于背景层 */
}

方法二：使用background叠加半透明渐变（适用于需叠加纯色层的场景） #

如果需要给背景图叠加一层半透明纯色，直接在background属性中结合半透明渐变和背景图，无需设置opacity：

CSS 修改示例 #

.bg-img {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("你的图片地址");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

p {
  color: white;
}

这里的rgba(0,0,0,0.2)是黑色半透明层，你可以根据需求调整颜色和透明度值，视觉上等同于背景图变透明，同时文本完全不受影响。

内容的提问来源于stack exchange，提问作者Desmond Winn