如何将单张大图覆盖在多个相邻小div上且保持响应式

你使用background-attachment: fixed失效的原因是该属性会让背景图相对于浏览器视口固定位置，页面滚动时背景图不会跟随页面元素移动，自然会出现错位。以下是两种符合需求的响应式实现方案：

方案1：每个灰色格子单独适配图片 #

适合每个格子显示独立图片，或者所有格子显示同一张图片的场景，图片会跟随格子滚动，自动适配格子大小。
修改CSS如下：

#container {
  background-color:yellow;
  text-align: center;
}

#container .row .smaller {
  background: white;
  border:  1px solid grey;        
  display: inline-block;
  width: 20%;
  /* 固定宽高比，保证响应式下格子形状不变，可按需调整比例 */
  aspect-ratio: 1/1;
  vertical-align: middle;
}

#container .row .smaller.image {
  /* 替换为你的图片地址 */
  background-image: url("你的图片路径");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 不需要保留浅灰色底色可删除下面这句 */
  background-color: lightgrey;
}

如果需要兼容不支持aspect-ratio的旧浏览器，可以把该属性替换为以下代码实现相同效果：

#container .row .smaller {
  height: 0;
  padding-top: 20%;
}

方案2：单张大图整体覆盖所有灰色格子 #

适合用一张完整的大图刚好覆盖9个灰色格子区域的场景：
首先在HTML的#container容器最开头新增图片元素：

<div id='container'>
  <img src="你的大图路径" class="cover-img" alt="覆盖图">
  <!-- 原有row代码保持不变 -->
  <div class='row'>...</div>
  ...
</div>

新增对应CSS：

#container {
  background-color:yellow;
  text-align: center;
  /* 开启相对定位作为图片的定位父级 */
  position: relative;
}

#container .cover-img {
  position: absolute;
  /* 位置偏移可根据实际布局微调，刚好覆盖灰色区域即可 */
  top: 0;
  left: 21%;
  width: 60%;
  height: 75%;
  object-fit: cover;
  /* 如果需要保留格子内的数字显示在图片上方，将z-index改为-1即可 */
  z-index: 1;
}

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