如何让背景图片停止溢出网页？已尝试overflow:hidden无效

你的问题核心是绝对定位的伪元素脱离了父元素的裁剪范围，导致给父元素加overflow:hidden没效果。因为当前.mainScreen没有设置position: relative，::after伪元素会相对于视口定位，父元素的溢出规则管不到它。

直接按下面的步骤修改代码就能解决：

1. 给.mainScreen添加position: relative，让伪元素以它为定位容器
2. 给.mainScreen加上overflow: hidden，裁剪伪元素缩放时的溢出部分
3. 可选：给伪元素加transform-origin: center，让缩放从图片中心开始，视觉效果更自然

修改后的完整代码：

.mainScreen {
  display: flex;
  color: white;
  height: 90vh;
  z-index: 2;
  /* 新增：让伪元素相对自身定位 */
  position: relative;
  /* 新增：裁剪溢出内容 */
  overflow: hidden;
}

.mainScreen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90vh;
  background-image: url('https://images.pexels.com/photos/9707969/pexels-photo-9707969.jpeg?auto=compress&cs=tinysrgb&w=600');
  background-size: cover;
  z-index: 1;
  animation: zoom-in-zoom-out 30s ease infinite;
  /* 可选：设置缩放原点为中心 */
  transform-origin: center;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}

<div class="mainScreen">
  <!-- 这里可以添加你的文本内容，不会跟着图片缩放 -->
</div>

原理说明：

• position: relative让.mainScreen成为伪元素的包含块，伪元素的定位和溢出都会受父元素约束
• overflow: hidden会裁剪所有超出父元素边界的子元素（包括伪元素），图片缩放时超出部分就会被隐藏，不会撑大网页
• transform-origin: center确保图片缩放时从中心放大，避免边缘偏移导致的视觉错位

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