设置垂直渐变背景时出现扫描线问题，寻求解决方案

出现扫描线的核心原因是渐变没有覆盖足够的高度，浏览器重复渲染渐变导致条纹。结合你的代码，按下面的方式修改就能解决：

方案1：让渐变覆盖body并居中内容 #

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-image: linear-gradient(red, yellow);
  width: 50%;
  margin: 0 auto;
}

修改说明： #

• 给html设置height: 100%，因为body的高度继承自html，确保渐变能延伸到视口底部
• body用min-height: 100%替代默认高度，避免内容太少时渐变被截断
• 用margin: 0 auto实现内容居中，比原来的padding-left:25%更合理，也不会影响背景范围
• 删掉background-size: cover，线性渐变默认会填满元素的整个尺寸，这个属性在这里反而可能干扰渲染

方案2：渐变覆盖整个页面，内容单独居中 #

如果想让渐变铺满整个浏览器窗口，只把内容限制在中间50%宽度，用这个写法：

html {
  height: 100%;
  background-image: linear-gradient(red, yellow);
}
body {
  margin: 0;
  width: 50%;
  margin: 0 auto;
  background: transparent;
}

这样渐变直接放在html上，确保覆盖整个视口，body只负责内容布局，完全不会出现扫描线问题。

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