本文详解如何修正视差滚动中多余的白色背景条问题，并为叠加的三个信息框添加合理水平间距，核心在于结构嵌套优化与 css 定位调整。
本文详解如何修正视差滚动中多余的白色背景条问题，并为叠加的三个信息框添加合理水平间距，核心在于结构嵌套优化与 css 定位调整。
在使用 background-attachment: fixed 实现视差效果时，一个常见误区是将 .parallax 容器与内容容器（如 .flexBox）分离为同级兄弟元素。原始代码中两个独立的 <div class="parallax"></div> 分别位于 .flexBox 上下两侧，导致中间的内容区域脱离背景上下文——浏览器会为 .flexBox 渲染默认的白色背景（或透明背景下的父级 白色），从而形成贯穿全宽的“白色横带”，且该区域随滚动独立移动，破坏视觉一致性。
✅ 正确做法是：将内容容器嵌套进唯一的 .parallax 元素内部，使其成为背景的子元素，从而继承透明背景，消除白带。同时，需通过 padding-top: 100vh 将内容垂直推至视口底部附近（避免被顶部遮挡），并利用 Flex 布局的 justify-content: space-around 自动分配三块 .text-block 之间的等距间隙。
以下是优化后的完整实现：
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
background-image: url("../mdck-parallaxPhoto/ganesh (4).jpg");
min-height: 700px;
padding-top: 100vh; /* 推内容至视口可视区中部偏下 */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.flexBox {
display: flex;
flex-direction: row;
justify-content: space-around; /* ✅ 关键：均匀分布三块，自动留出左右及中间间距 */
align-items: center;
position: relative;
top: -100vh; /* 补偿 padding-top 的位移，使内容实际居中于图片可见区域 */
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.text-block {
background-color: rgba(255, 255, 255, 0.92); /* 推荐半透明白底，提升可读性与层次感 */
padding: 40px 36px;
border: 2px solid #333;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-align: center;
min-width: 180px;
}
p {
font-weight: bold;
font-family: "Helvetica", sans-serif;
color: #c00;
margin: 0;
font-size: 1.1rem;
}
</style>
</head>
<body>
<div class="parallax">
<div class="flexBox">
<div class="text-block"><p>Estd. 1984</p></div>
<div class="text-block"><p>Staff 25</p></div>
<div class="text-block"><p>Students 1000</p></div>
</div>
</div>
</body>
</html>? 关键要点总结：
- ❌ 避免多个
.parallax元素并列；✅ 仅保留一个，将所有内容作为其直接子元素嵌套； -
padding-top: 100vh+top: -100vh组合确保内容在视口内垂直居中显示（适配不同屏幕高度）； - 使用
justify-content: space-around而非center，天然生成左右外边距与元素间等距间隙； - 建议
.text-block使用rgba(255,255,255,0.92)替代纯白，兼顾可读性与背景图像的层次表现； - 添加
box-shadow和max-width可进一步提升响应式体验与现代感。
此方案彻底消除白带干扰，让三组信息框真正“浮”于图像之上，实现专业级视差叠加效果。
