仅在特定页面位置上的颜色渐变，即使它具有无限滚动

Question

我应用css代码在页面的初始部分创建阴影(我有一个社交网络，我想创建由Facebook在用户个人资料页面上创建的阴影类型，只是为了得到一个想法)。对于某些页面，一切似乎都没问题，但对于其他页面则不然。也就是说，对于较短的页面，阴影可能是可以接受的，但对于较长的页面，阴影随着页面长度的增加而增加，几乎侵占了页面。我试图设置特定的高度值，但没有成功，实际上，如果我设置一个&;height&;值将创建不需要的分隔线。

我使用的代码如下:

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%);

一些主意吗?谢谢你！

Answer 1

如果你使用像素值而不是百分比值，你可以保持渐变高度一致。

div {
background: linear-gradient(to bottom, black 0px, #f0f2f5 50px);
width: 100px;
}
body {
display: flex;
}

<div style="height: 100px;"></div>
<div style="height: 400px;"></div>