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

Question

我正在尝试在 html 标签上实现

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 的背景配置，您还可以制作渐变或插入将在滚动时显示的图像。

Answer 2

您可以尝试使用 html:before 在内容后面固定渐变。

html {
    margin: 0;
    height: 100%;
}

// Ensures gradient background is static when overscrolling
html:before{
    content:"";
    width: 100%;
    height: 100%;
    position: fixed;
    background: linear-gradient(to bottom, #143E0C, #136902);
}

body {
    display: inline-block;
    overflow: scroll;
    height: 100vh;
    position: relative;
    background: transparent;
}