overflow属性不生效、1920px以下屏幕显示异常及底部圆形不隐藏问题求助

AI 小北

2026-10-5

问题原因

body设置overflow: hidden不生效：浏览器默认会将body的overflow属性传播到html根元素，仅给body设置溢出隐藏不会裁剪视口溢出内容，因此超出body范围的底部圆形装饰不会被隐藏。
屏幕宽度小于1920px时显示效果差：两个背景圆形装饰的宽高设置为100%，配合background-size: contain会随视口缩小被压缩变形，同时百分比定位也会随视口尺寸变化发生偏移，导致视觉效果异常。另外你提供的CSS末尾存在多余的闭合大括号，也可能导致部分样式解析失效。

修复方案

给html根元素添加上溢出隐藏属性，同时统一html和body的基础样式：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

原有body样式里的min-height: 100vh可保留或替换为height: 100%，不影响最终效果。

将两个背景圆形装饰的宽高改为固定值（匹配原素材尺寸978px即可），调整适配后的定位数值：

.gradient-top {
  z-index: -10;
  position: absolute;
  background-image: url("images/bg-pattern-top.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 978px;
  height: 978px;
  top: -48%;
  left: -18%;
}

.gradient-bottom {
  z-index: -10;
  position: absolute;
  background-image: url("images/bg-pattern-bottom.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 978px;
  height: 978px;
  bottom: -62%;
  right: -16%;
}

定位数值可根据你想要的视觉效果微调，固定宽高后不会再随视口尺寸变化发生变形。