为什么背景图像不像background-color那样扩展到webkit中的过度滚动呢？

Question

我试图在html标记上实现linear-gradient，以便在用户压缩时显示它。

我可以将css background-color应用于html元素，以允许颜色显示为在页面上方和下方延伸，以使过度滚动变得不那么刺耳或原生。＆＃39;这有时被称为“橡皮筋”。＆＃39;

我可以在Peter Ramsing's site找到一个很好的例子。他的例子如下：

但是，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的背景配置，您还可以在其中进行渐变或插入将在过度滚动中显示的图像。