为什么background-image不像background-color那样延伸到webkit中的过度滚动？

Question

我正在尝试在 html 标签上实现 a linear-gradient，以便当用户过度滚动时它会出现。

我可以将 css 应用于background-color元素html，让颜色看起来像它们延伸到我们页面的上方和下方，从而使过度滚动不那么刺耳或“原生”。这有时被称为“橡皮筋”。

可以在Peter Ramsing 的网站上找到一个很好的例子来说明我的意思。他的例子如下：

然而，background-color似乎是唯一能像这样工作的财产。background-color以下是和background-image(线性渐变)之间行为差异的示例- 对 gif 质量表示歉意：

您可以在codepen上找到用于复制问题的标记- 除非在调试模式下，否则无法在 codepen 本身内复制该问题，因此我建议分叉此链接进行测试。

如果能够选择扩展任何背景属性并考虑橡皮筋，那就太好了。我不认为有解决这个问题的方法，所以我想看看是否有人知道为什么 Chrome 团队没有将此作为一项功能？

如果没有人知道为什么我要为此提交错误/功能请求。

Answer 1

当为 html 设置背景时，它将应用于所有四个边框。如果您只想在顶部网站上有背景颜色，请div在页面上方添加一个元素：

<div style="height:1000px;background:#00BD9C;margin-top:-1000px;position:fixed;width:100%;"></div>

这样，溢出颜色将仅应用在顶部。根据插入的 div 的背景配置，您还可以制作渐变或插入将在滚动时显示的图像。