能否设置body背景图片的透明度且不影响其他页面元素？

直接给body设置opacity属性之所以不符合预期，是因为该属性会作用于元素本身及其所有子元素，无法单独对背景生效，可通过以下两种兼容方案实现需求： #

方案1：使用伪元素单独承载背景（兼容性最优，支持IE9及以上） #

将背景图放到body的::before伪元素上单独控制透明度，再将伪元素层级放到所有内容下方即可，代码示例如下：

body{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  /* 给子绝对定位元素提供定位基准 */
  position: relative;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 原背景相关属性移到此处 */
  background-image: url(/images/grid.png);
  background-repeat: repeat; 
  /* 单独控制背景透明度 */
  opacity: 0.5;
  /* 确保背景层在所有内容下方 */
  z-index: -1;
}

注意事项：不要给body的直接子元素设置负的z-index，否则对应元素会被背景层覆盖。

方案2：直接修改图片资源（性能最优） #

如果可以修改原始的grid.png资源，直接在图像编辑工具中将图片导出为透明度50%的PNG/WebP格式，直接使用原CSS即可，不需要额外代码，性能消耗最低。 #

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