纯CSS实现无限滚动视差：背景与内容高度匹配问题

我来帮你搞定这个视差背景的高度适配问题！核心矛盾在于你用的3D变换（translateZ(-1px) scale(2)）会让背景元素的视觉高度是原始高度的2倍，而绝对定位的top:0; bottom:0又会强制元素撑满父容器高度，导致背景超出内容区域。下面是具体的解决方案：

问题根源拆解 #

你之前设置height: 999999999999999px加上父容器overflow:hidden无效的原因是：3D变换会创建独立的堆叠上下文，父容器的overflow:hidden无法裁剪处于3D变换层的元素，所以背景依然会溢出。

解决方案代码 #

修改后的CSS #

body, html { margin: 0; padding:0; height: 100%; }
.wrapper { 
  height: auto; /* 关键：让容器随内容自动撑开高度，适配动态加载的内容 */
  overflow-x: hidden; 
  overflow-y: auto; 
  perspective: 1px; 
}
.section { 
  position: relative; 
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 48px; 
  color: white; 
}
.parallax{ 
  content: " "; 
  position: absolute; 
  top: 0; 
  left: 0;
  right: 0;
  /* 移除bottom:0，避免强制撑满父容器高度 */
  transform: translateZ(-1px) scale(2); 
  transform-origin: top center; /* 让缩放从顶部开始，保证底部刚好对齐内容区域 */
  background-size: 100%; 
  z-index: -1; 
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQz56_A2dNoJkPZu3nFpCRn-4NaM9oMsrl1nT0JEjWlbYtkIWg1'); 
  height: 50%; /* 原始高度设为父容器的50%，scale(2)后视觉高度刚好等于父容器高度 */
  background-repeat: repeat-y; /* 开启垂直重复，保证无缝图案效果 */
}
.content { 
  height: auto; /* 让内容高度随文本自动撑开 */
  width: 400px; 
  margin: auto; 
  padding: 2rem; /* 增加内边距提升可读性 */
  background: red; 
}

HTML保持不变 #

<div class="wrapper">
  <div class="section parallax"></div>
  <div class="content">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum venenatis magna, eget hendrerit leo varius vel. Mauris sit amet posuere elit, porta molestie orci. Praesent in vestibulum eros, sit amet aliquam magna. Etiam sed egestas sem, sit amet gravida sapien. Nullam ipsum ligula, ullamcorper ut facilisis vitae, convallis quis ligula. Morbi eleifend tellus mauris, et fermentum nulla semper non. Sed accumsan ultricies ipsum, vestibulum varius est rhoncus quis. Suspendisse nec odio quis magna gravida interdum. Suspendisse in elit tortor. Cras ac nibh sed dolor rhoncus accumsan. Morbi iaculis id mauris quis tristique. Phasellus eleifend purus nec gravida euismod. </h1>
  </div>
</div>

关键修改说明 #

1. .wrapper的height:auto：让容器高度完全由内容决定，不管是初始内容还是后续AJAX加载的内容，都会自动适配。
2. .parallax的定位调整：移除bottom:0，改用height:50%，结合transform-origin: top center，确保缩放后的背景底部刚好对齐内容区域的底部。
3. 反向计算高度：因为scale(2)会让元素视觉尺寸放大2倍，所以把原始高度设为父容器的50%，缩放后刚好匹配内容总高度，避免背景溢出。
4. 无缝图案适配：开启background-repeat: repeat-y，保证缩放后的背景图案依然无缝重复。

如果后续需要支持AJAX加载内容，只需要确保.wrapper的高度始终是auto，.parallax的height:50%会自动继承父容器的新高度，无需额外JavaScript操作（除非内容加载后需要强制重排，不过一般浏览器会自动处理）。

内容的提问来源于stack exchange，提问作者Fernando Jesus Garcia Hipola