如何在移动端实现同一张图片模糊后作为背景叠放在清晰原图下方

问题核心原因 #

z-index 仅对设置了非static定位（relative/absolute/fixed等）的元素生效，你当前的代码没有给容器和图片设置定位，所以两张图片始终处于正常文档流中上下排布，无法实现上下堆叠效果。

修复方案（仅修改SCSS即可，Vue代码无需调整） #

修改后的SCSS代码如下，所有堆叠逻辑仅在移动端生效，不影响PC端原有布局：

.img-big {
  /* 父容器加相对定位，作为内部绝对定位元素的位置参照 */
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    @media only screen and (max-width: 420px) {
      /* 未模糊图加相对定位让z-index生效，悬浮在背景上方 */
      position: relative;
      z-index: 2;
      width: 70%;
    }
  }
  .blur-background-img {
    /* PC端默认隐藏模糊背景图，避免冗余渲染 */
    display: none;
    @media only screen and (max-width: 420px) {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      margin: 0;
      filter: blur(8px);
      /* 避免背景图拉伸变形 */
      object-fit: cover;
    }
  }
}

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