当使用 background: linear-gradient() 时，若未正确设置背景尺寸与附着方式，浏览器会默认将渐变作为重复平铺图案渲染，导致视觉上出现“条纹”或“多段重复”效果；解决关键在于结合 background-size: cover 与 background-attachment: fixed。
当使用 `background: linear-gradient()` 时，若未正确设置背景尺寸与附着方式，浏览器会默认将渐变作为重复平铺图案渲染，导致视觉上出现“条纹”或“多段重复”效果；解决关键在于结合 `background-size: cover` 与 `background-attachment: fixed`。
在你的 CSS 中，body 元素已设置了：
body {
background: linear-gradient(#D077E8, #01536C);
background-size: cover;
user-select: none;
overflow: hidden;
}虽然 background-size: cover 能让渐变填满容器，但它无法阻止浏览器对背景进行默认平铺（tile）行为——尤其在内容高度超过视口、页面可滚动时，渐变会被当作一个“无限重复的纹理”来渲染，从而在滚动过程中产生明显的分段色带或重复感（即你观察到的“多次显示”现象）。
✅ 正确解法是添加 background-attachment: fixed：
body {
background: linear-gradient(#D077E8, #01536C);
background-size: cover;
background-attachment: fixed; /* ? 关键修复 */
user-select: none;
overflow: hidden;
}为什么 background-attachment: fixed 有效？
-
fixed值使背景相对于视口（viewport）固定定位，而非随页面内容滚动； - 渐变不再绑定于
的文档流高度，而是始终覆盖整个可视区域，且仅渲染一次； - 配合
background-size: cover，确保该单次渲染的渐变完美适配当前屏幕尺寸，彻底消除重复拼接痕迹。
⚠️ 注意事项
-
避免在移动端过度依赖
fixed：部分旧版 Android 浏览器对background-attachment: fixed支持不佳，可能回退为scroll或触发性能问题。如需极致兼容，可添加媒体查询降级：@supports (background-attachment: fixed) { body { background-attachment: fixed; } } -
勿与
background-repeat混淆：linear-gradient默认background-repeat: repeat，但即使设为no-repeat，若缺少background-attachment: fixed或合适background-size，仍可能因容器尺寸变化导致裁切/拉伸异常。 -
慎用于有复杂滚动容器的场景：若页面主体使用
overflow: hidden但内部存在自定义滚动区（如.scroll-container），应将渐变背景移至该容器并单独控制其background-attachment。
✅ 最终推荐写法（含健壮性增强）
body {
margin: 0;
background: linear-gradient(135deg, #D077E8, #01536C);
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
user-select: none;
overflow-x: hidden;
}? 提示：
background-position: center可进一步保证渐变中心对齐，避免在宽高比差异较大设备上出现偏移；overflow-x: hidden防止意外横向滚动干扰视觉一致性。立即学习“前端免费学习笔记（深入）”；
通过这一组合配置，你的线性渐变将真正成为全屏、单次、响应式、无重复的沉浸式背景，完美契合现代 Web 应用的视觉需求。
