如何在无限滚动页面的特定位置固定CSS渐变效果

核心问题分析 #

你当前使用的渐变结束值是百分比（10%），这个值是相对于元素总高度计算的。当页面（或渐变所在元素）因无限滚动变长时，10%对应的实际像素高度会随之增大，导致渐变范围过度延伸、侵占内容。设置固定height出现分割线，是因为元素高度被固定后，和下方内容衔接处出现了断层。

具体解决方案 #

• 用固定像素值替代百分比：把渐变的结束位置从百分比改成固定像素（比如200px），这样不管页面多长，渐变范围都固定在顶部指定高度内，不会随页面高度变化。示例代码：

background: black;
background: -moz-linear-gradient(top, black 0%, #f0f2f5 200px);
background: -webkit-linear-gradient(top, black 0%, #f0f2f5 200px);
background: linear-gradient(to bottom, black 0%, #f0f2f5 200px);

• 固定渐变元素定位（针对顶部导航场景）：如果渐变是给顶部导航做的阴影效果，将渐变元素设为position: fixed; top: 0; left: 0; right: 0;，同时设置固定高度（比如200px），再给页面主体添加padding-top避开这个固定元素。这样既保证渐变范围固定，又不会和下方滚动内容冲突。
• 用background-size限制渐变范围：如果不想调整渐变的百分比写法，可通过background-size: 100% 200px;强制渐变高度为固定值，搭配background-repeat: no-repeat;避免渐变重复延伸：

background: black;
background: -moz-linear-gradient(top, black 0%, #f0f2f5 10%);
background: -webkit-linear-gradient(top, black 0%, #f0f2f5 10%);
background: linear-gradient(to bottom, black 0%, #f0f2f5 10%);
background-size: 100% 200px;
background-repeat: no-repeat;

额外优化建议 #

• 测试不同屏幕尺寸下的固定像素值，确保移动端和桌面端都不会出现渐变覆盖内容或显示不全的问题。
• 如果是导航栏下方的阴影渐变，可考虑将渐变应用在导航栏的伪元素（如::after）上，无需额外DOM元素，还能更精准控制位置和范围。

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