当使用 background: linear-gradient() 时，若未正确设置背景尺寸与附着方式，浏览器会默认平铺渐变（类似重复背景图），导致视觉上出现不自然的条纹或分段效果；只需添加 background-attachment: fixed 并确保 background-size: cover 生效即可消除重复。
当使用 `background: linear-gradient()` 时，若未正确设置背景尺寸与附着方式，浏览器会默认平铺渐变（类似重复背景图），导致视觉上出现不自然的条纹或分段效果；只需添加 `background-attachment: fixed` 并确保 `background-size: cover` 生效即可消除重复。
在你的 CSS 中，body 元素已声明了 background-size: cover，这本应让渐变铺满整个视口——但关键遗漏在于：background-size 仅在背景不重复时才按预期缩放。而 CSS 中 linear-gradient() 默认行为等同于 background-repeat: repeat，即把渐变当作一个无限平铺的“图案”来渲染。尤其在页面内容高度超过一屏、或存在滚动时，该重复行为会暴露为明显的色带断层或周期性明暗条纹。
✅ 正确解法是显式控制背景的绘制行为：
body {
background: linear-gradient(#D077E8, #01536C);
background-size: cover; /* 铺满容器 */
background-attachment: fixed; /* 关键！固定背景不随滚动位移 */
background-repeat: no-repeat; /* 可选但推荐：双重保险，禁用平铺 */
user-select: none;
overflow: hidden;
}? 为什么 background-attachment: fixed 有效？
它将背景锚定在视口（viewport）而非元素本身。配合 background-size: cover，浏览器会将整个渐变一次性计算并拉伸至覆盖当前可见区域，滚动时背景保持静止，从而彻底避免因元素滚动触发的重复渲染逻辑。
⚠️ 注意事项：
- 不要仅依赖
background-size: cover：它无法覆盖repeat的默认行为； - 避免在
body上同时设置background-image和background-color（除非有意叠加），否则可能干扰渐变渲染； - 若需响应式适配，可补充
background-position: center提升居中稳定性； - 在部分旧版 Safari 中，
background-attachment: fixed对支持较弱，此时建议改用<div id="bg-gradient"></div>全屏覆盖层方案（绝对定位 +z-index: -1）作为兼容 fallback。
? 总结：CSS 渐变不是“图片”，但浏览器将其视为可平铺的背景图像。要实现全屏单次渲染的丝滑渐变，必须三者协同——background: linear-gradient(...), background-size: cover, background-attachment: fixed（+ background-repeat: no-repeat）。这是现代 Web 开发中实现高质量全屏渐变背景的标准实践。
立即学习“前端免费学习笔记（深入）”；
