如何在HTML中修改背景图片的opacity（透明度）？

首先明确：没有直接的CSS属性可以单独为background-image设置透明度。opacity属性会作用于整个元素及其内部的所有内容，无法仅针对背景图片生效。

你提到的在背景图片上方添加半透明盒子的方法，本质是让前景容器（及其中的文字）变得半透明，并非真正修改背景图片的透明度。如果你的需求是让背景图片本身呈现透明效果，推荐以下两种更合适的实现方式：

方法1：使用background属性叠加半透明颜色与背景图 #

通过rgba()颜色值和背景图叠加，实现背景图的透明效果：

body {
  /* 先设置半透明底色，再叠加背景图 */
  background: rgba(255, 255, 255, 0.8) url("http://placekitten.com/g/300/100");
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.div1 {
  text-align: center;
  font-size: 30px;
  font-family: 'Rubik', sans-serif;
  margin: 30px;
  border: 1px solid black;
}

对应的HTML结构：

<!DOCTYPE html>
<html>
<body>
  <div class="div1">
    <p>这里可以添加文本和其他内容。</p>
  </div>
</body>
</html>

方法2：使用伪元素实现背景图透明 #

通过给父元素添加伪元素，将背景图放在伪元素上并设置opacity，不会影响父元素内的其他内容：

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
}

/* 伪元素作为独立背景层 */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("http://placekitten.com/g/300/100");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.8; /* 仅作用于背景图 */
  z-index: -1; /* 将背景层置于内容下方 */
}

.div1 {
  text-align: center;
  font-size: 30px;
  font-family: 'Rubik', sans-serif;
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
}

对应的HTML结构：

<!DOCTYPE html>
<html>
<body>
  <div class="div1">
    <p>这里可以添加文本和其他内容。</p>
  </div>
</body>
</html>

如果你的需求只是让前景内容区域半透明（即你最初找到的方案），原代码是可行的，但要注意此时文本也会跟着变透明，可能影响可读性。

内容的提问来源于stack exchange，提问作者Pragya Vijay