如何在不使整个body元素变暗的情况下调整背景图片透明度？

直接给#indexbody设置opacity属性的话，会让整个元素及其所有子内容一起变透明，没法单独只调整背景图的透明度。不过可以通过以下两种方法实现需求：

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

通过给#indexbody添加一个伪元素，让伪元素单独承载背景图并设置透明度，同时将伪元素置于内容下方，这样就不会影响body里的内容：

#indexbody {
  position: relative;
  z-index: 1; /* 确保内容在伪元素上层 */
}

#indexbody::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("hs2.webp");
  background-size: 100% auto;
  opacity: 0.5; /* 这里调整透明度，0为完全透明，1为不透明 */
  z-index: -1; /* 将伪元素放到内容下方 */
}

方法二：使用渐变叠加背景 #

利用CSS的background属性，将半透明渐变和背景图叠加，通过调整渐变的透明度来实现背景图视觉上的透明效果：

#indexbody {
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("hs2.webp");
  background-size: 100% auto;
}

这里的rgba(255,255,255,0.5)是白色半透明渐变，你可以根据需要修改颜色和透明度数值（最后一位是透明度，范围0-1）。这种方法是通过叠加颜色层实现的，和伪元素方法的视觉效果略有差异，适合对背景色调要求不高的场景。

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