如何移除Parallax效果中盒子后方白色条带并设置盒子间距？

问题描述 #

当前实现的视差效果存在两个问题：

1. 三个白色盒子后方出现贯穿页面宽度的白色条带，随页面滚动移动
2. 盒子之间无间距，布局过于紧凑

修改后的完整代码 #

CSS 代码 #

/* 重置浏览器默认边距，消除不必要留白 */
body {
  margin: 0;
  padding: 0;
}

.parallax {
  /* 背景图片 */
  background-image: url("../mdck-parallaxPhoto/ganesh (4).jpg");
  /* 设置固定高度 */
  min-height: 700px;
  /* 实现视差滚动效果 */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.flexBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* 绝对定位让盒子悬浮在视差图上方，不占据文档流空间 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 设置盒子之间的间距 */
  gap: 30px;
}

.text-block {
  background-color: white;
  padding: 50px;
  border: 2px solid black;
  border-radius: 20px;
}

p {
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  color: red;
}

HTML 代码 #

<!doctype html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css"> <!-- 确保引入修改后的CSS文件 -->
</head>

<body>
  <!-- 视差效果区域 -->
  <div class="parallax"></div>
  <!-- 悬浮的统计盒子 -->
  <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 class="parallax"></div>
</body>

</html>

修改说明 #

1. 移除白色条带：

   • 重置body的margin和padding为0，消除浏览器默认留白
   • 给.flexBox添加绝对定位，让盒子悬浮在视差背景上方，不再占据文档流空间，两个.parallax区域会连续显示，避免中间出现body的白色背景条带

2. 设置盒子间距：

   • 在.flexBox中添加gap: 30px属性，直接给flex容器内的子元素设置均匀间距；也可以用margin-right: 30px给前两个.text-block设置右侧间距，gap是更简洁的flex布局方案

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