为何设置background-attachment:fixed的背景图未在透明div区域显示

核心原因 #

你对background-attachment: fixed的作用存在误解：这个属性仅决定当前元素的背景图的定位基准是视口，但背景图的可见范围始终受限于当前元素本身的盒模型区域，只有元素在文档流中占据的位置，才会渲染它的背景。

你当前的布局里，#background是页面第一个元素，高度仅为100vh，它在文档流里仅占据页面顶部0~100vh的区域。当你向下滚动页面，超过100vh的区域（包括#transparent-area所在的位置）根本不属于#background的渲染范围，哪怕它的背景图是相对于视口固定的，也不会在元素本身的区域外显示。

修复方案 #

方案1：将背景设置在页面根元素上 #

直接把背景属性加到body或html标签上，根元素默认占据整个页面的高度，所有透明区域都会透出固定背景：

body {
  margin: 0;
  background-image: url("https://images.unsplash.com/photo-1612225330812-01a9c6b355ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* 可以删掉原#background的样式和对应的HTML元素 */

方案2：将#background设为全局固定层 #

给#background添加固定定位，让它脱离文档流，覆盖整个视口并置于最底层：

#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; /* 放在所有内容下方 */
  width: 100vw;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1612225330812-01a9c6b355ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  /* 不需要再加background-attachment: fixed了，因为元素本身已经固定 */
}

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