嘿，这个需求我之前帮人解决过好几次，咱们来拆解一下怎么实现👇

核心思路是把背景容器（background wrapper）和内容容器（content-div）的布局彻底分离——让背景容器只负责渲染背景和（如果它带伪元素的话）斜角，而内容容器完全不受背景容器尺寸的影响，独立控制位置来实现和上下section的重叠。

下面给你三个靠谱的方案，你可以根据自己的现有代码选最适配的：

方案一：绝对定位分离背景与内容 #

这是最直接的方法，利用父级的相对定位做上下文：

• 给section2设置 position: relative;，作为内部元素的定位基准
• 把background wrapper设置为 position: absolute; top: 10%; bottom: 10%; width: 100%;（这里的top/bottom值可以自己调，实现你想要的收缩效果），这样它的尺寸变化完全不影响文档流
• 给content-div设置 position: relative; z-index: 1;（确保内容在背景上面），然后继续用你原来的负top/bottom或者margin值调整位置，实现和section1、3的重叠
• 👉 关于斜角伪元素：如果你的伪元素是挂在section2上的（before/after），完全不用担心——它们是基于section2的边界渲染的，和background wrapper的尺寸无关；如果伪元素是挂在background wrapper上的，那会跟着背景容器一起收缩，这时候建议把伪元素移到section2上，效果更可控

方案二：CSS Grid 实现层叠布局 #

用Grid可以更优雅地让两个容器层叠，而且代码更简洁：

• 给section2设置 display: grid;
• 同时给background wrapper和content-div加上 grid-area: 1 / 1;，让它们重叠在同一个网格区域里
• 给background wrapper设置 height: 80%; margin: auto;（或者你想要的收缩比例），它会在section2内部居中收缩，完全不干扰content-div
• content-div继续用你的负偏移值调整位置，实现上下重叠，记得给它加个 z-index: 1; 确保在背景上方
• 👉 伪元素的处理和方案一一样，挂在section2上就不会受影响

方案三：Transform 视觉收缩背景容器 #

如果不想改定位方式，可以用transform来做视觉上的收缩（缺点是背景容器在文档流里的占位还是原来的大小，但如果你的content-div已经脱离文档流就无所谓）：

• 给background wrapper设置 transform: scaleY(0.8); transform-origin: center;，这里的scaleY值可以调整（0.8就是垂直收缩到80%），transform-origin确保它从中心收缩
• 这种方式不会改变背景容器的实际尺寸，只是视觉上缩小，content-div依然可以独立调整位置
• 👉 注意：如果伪元素是挂在background wrapper上的，会跟着一起缩放，所以如果要保持斜角的形状不变，还是建议把伪元素移到section2上

给你贴个方案二的极简代码示例，方便你参考：

.section-2 {
  position: relative;
  padding: 0; /* 根据需求调整，避免默认padding影响 */
}

/* 你的斜角伪元素样式（挂在section2上） */
.section-2::before,
.section-2::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 40px;
  background: inherit;
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); /* 示例斜角，替换成你自己的样式 */
}

.section-2 .background-wrapper {
  grid-area: 1 / 1;
  height: 85%; /* 收缩到原高度的85% */
  margin: 30px auto; /* 上下留白，实现收缩效果 */
  background: #f0f0f0; /* 你的背景色 */
}

.section-2 .content-div {
  grid-area: 1 / 1;
  position: relative;
  top: -40px; /* 向上偏移和section1重叠 */
  margin-bottom: -40px; /* 向下偏移和section3重叠 */
  z-index: 1;
  padding: 2rem; /* 内容内边距 */
}

这样就能完美实现你要的效果：背景容器收缩，内容容器不受影响，同时保持和上下section的重叠，斜角伪元素也能正常工作～

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