:before伪元素溢出div范围，固定背景布局优化后问题求助

嘿，我来帮你搞定这个问题！

你遇到的核心问题其实很好理解：position: fixed的元素是直接相对于浏览器视口定位的，完全脱离了父元素的文档流——所以你给.hero加的overflow: hidden根本管不住它，fixed元素不属于.hero的布局上下文，自然不会被父元素的溢出规则限制。

这里有个完美解决你需求的方案，既能保留固定背景的流畅滚动，又能把背景图限定在.hero区域内：

解决方案：用clip-path裁剪伪元素的显示范围 #

给.hero添加clip-path属性，强制将其内部所有元素（包括fixed定位的伪元素）的显示范围锁在自身边界内：

.hero{
  position: relative;
  overflow: hidden;
  min-height: 100%;
  /* 新增这行，裁剪出和.hero完全一致的显示区域 */
  clip-path: inset(0 0 0 0);
}

inset(0 0 0 0)的意思是裁剪出和元素自身完全匹配的矩形区域，这样fixed伪元素超出.hero的部分就会被直接裁剪掉，不会跑到下面的section区域里。

额外优化建议 #

我注意到你的.hero设置的是min-height: 100%，如果想让它刚好占满一屏，建议改成min-height: 100vh，这样更直观，也能确保背景图在第一屏完全展示：

.hero{
  position: relative;
  overflow: hidden;
  min-height: 100vh; /* 修改为100vh */
  clip-path: inset(0 0 0 0);
}

这个方案既保留了你用伪元素实现固定背景的流畅性，又完美解决了溢出问题，而且clip-path在主流浏览器中兼容性良好，完全可以放心使用。

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