如何让带波浪背景的Div与上方图片Div精准对齐？

问题详情 #

我有一个设置了波浪背景的橙色Div（.about-us-section），上方是一个包含图片的Div（.main-section），本该紧密贴合的两个区块，因为波浪边缘的空白出现了分离。考虑用position: relative解决，但不确定是不是最优方案。

效果对比 #

• 预期效果：
  
• 当前效果：
  

波浪背景图 #

现有代码 #

CSS

.about-us-section {
  background: url("/assets/images/about-us-background.png") repeat-x;
  padding: 90px 0px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

HTML

<div class="main-section" id="home">
   <img
      class="person-image"
      src="/assets/images/person.png"
      alt="首页图片"
      />
</div>

<div class="about-us-section" id="about-us">
   <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facere
      velit repellat eligendi accusantium ratione doloribus, aliquid sapiente
      iste fuga ad totam deserunt temporibus commodi, dicta voluptas, at
      exercitationem necessitatibus?
   </p>
</div>

最优解决方案 #

不推荐单纯用position: relative，因为它会留下原位置空白，影响后续布局。推荐两种更高效的方法：

方法1：负边距贴合 #

根据波浪的实际高度，给橙色Div设置负上边距，同时调整内边距避免内容被遮挡：

.about-us-section {
  /* 保留原有样式 */
  margin-top: -30px; /* 替换成你波浪的实际高度 */
  padding-top: calc(90px + 30px); /* 原padding-top加上波浪高度，保证内容位置不变 */
}

这种方法直接通过边距调整让区块贴合，没有布局副作用。

方法2：将波浪作为上方区块的底部背景 #

如果波浪图是透明底色，把它加到.main-section的底部，让两个区块自然衔接：

.main-section {
  background: url("/assets/images/VYf7Q.png") bottom center no-repeat; /* 替换成你的波浪图路径 */
  background-size: 100% auto;
  padding-bottom: 30px; /* 对应波浪高度，防止图片被波浪遮挡 */
}

这种方式让波浪成为上方区块的一部分，逻辑更合理，后续维护更方便。

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