Parallax视差效果下图片重复显示问题求助

问题描述 #

昨天做了一个Parallax视差效果，原本运行正常，但今天调整浏览器窗口大小时，发现背景图片出现重复显示的情况。添加background-repeat: no-repeat属性后，整个视差效果直接失效了，试了多种方法都没解决。

解决方案 #

问题根源是背景属性的组合逻辑冲突：单独设置no-repeat时，会和background-attachment: fixed的渲染规则产生矛盾，再加上固定宽高比的容器限制，导致视差效果崩溃。你需要整合背景属性，同时保证不重复、尺寸适配和视差核心效果。

修改后的CSS代码（二选一即可） #

方法1：使用background简写属性（简洁版）

.pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 2.28/1;
  /* 一次性整合所有背景属性，避免冲突 */
  background: url('pictures/Coldcreekranch Faistenau Slider.jpeg') no-repeat center center fixed;
  background-size: cover; /* 按比例缩放图片覆盖容器，解决重复问题 */
}

.text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

方法2：拆分属性（清晰版）

.pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 2.28/1;
  background-image: url('pictures/Coldcreekranch Faistenau Slider.jpeg');
  background-attachment: fixed; /* 保留视差核心 */
  background-repeat: no-repeat; /* 禁止图片重复 */
  background-position: center center; /* 图片居中显示 */
  background-size: cover; /* 适配容器尺寸，避免空白或重复 */
}

.text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

关键说明 #

1. background-size: cover是核心：让图片按自身比例缩放，完全覆盖容器区域，既解决了窗口调整时的重复问题，又不会拉伸变形。
2. 整合/明确所有背景属性：避免单独设置某个属性时，意外覆盖background-attachment: fixed的视差规则。
3. background-position: center center确保图片始终在容器中居中，提升视觉效果。

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