本文详解如何通过分离 background-image 与 background-color，配合 background-size 控制渐变范围，实现“滚动时只渲染一次、超出高度后恒定为终点色”的背景效果。
本文详解如何通过分离 background-image 与 background-color，配合 background-size 控制渐变范围，实现“滚动时只渲染一次、超出高度后恒定为终点色”的背景效果。
在 CSS 中，linear-gradient 默认会平铺（repeat）或拉伸以填满整个元素背景区域，这导致长页面中渐变反复出现，无法实现“仅在前 3000px 内渐变，之后固定为纯色”的预期行为。关键在于：渐变本身不是背景的全部，而是可独立控制的图像层。
正确做法是将渐变声明为 background-image，同时设置 background-color 作为后备底色，并用 background-size 明确限定渐变图像的高度范围：
body {
min-height: 100vh;
background-color: #F00; /* 超出渐变区域后的恒定底色 */
background-image: linear-gradient(
180deg,
#F00 0px,
#0F0 1000px,
#00F 2000px,
#F00 3000px
);
background-repeat: no-repeat;
background-size: 100% 3000px; /* 宽度铺满，高度严格限制为 3000px */
background-position: top center;
}
✅ 核心原理说明：
-
background-image仅渲染一次（因no-repeat），且尺寸被background-size限定为100% × 3000px； -
background-color作为底层，在渐变图像未覆盖的区域（即y > 3000px）自然显露； - 渐变自身不随滚动重复，而是随页面滚动整体位移——符合“滚动跟随”需求；
- 不依赖
fixed定位，完全保持文档流行为。
⚠️ 注意事项：
- 避免将
background简写属性与background-color混用，否则会覆盖background-image或background-size；务必分开声明； -
min-height: 100%应改为100vh（视口高度），避免在无内容时失效； - 若需兼容旧版浏览器，可添加
-webkit-linear-gradient前缀，但现代项目通常无需； - 渐变色标位置建议使用具体像素值（如
#0F0 1000px）而非百分比，确保跨设备高度一致性。
最终效果：页面从顶部开始呈现红→绿→蓝→红的垂直渐变，到 3000px 处结束；继续向下滚动时，背景恒为 #F00（即 background-color），干净利落，无重复、无断裂、无闪烁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
