在html页面上向下滚动时如何阻止白色出现？

Question

我在 CSS 中定义的 html 文档中有一个渐变背景：

body {
    /*background-color: #1A0F0F;*/
    /*color: #D7D7D7;*/
    /*height: 100%;*/ /* come back to this */
    margin: 0;
    background: -webkit-linear-gradient(green, black); 
    background: -o-linear-gradient(green, black); 
    background: -moz-linear-gradient(green, black); 
    background: linear-gradient(green, black);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

背景渐变肯定存在，但是当我滚动时，渐变消失在底部矩形上并且只是白色 - 具体来说，这是在 Mac 上打开 Google Chrome 上的文档，但它似乎也发生在 Safari 上。

任何想法会导致这种情况？

Answer 1

发生这种情况的原因是 OSX 中的过度滚动（或“弹性滚动”）。

您不能为过度滚动区域（默认为白色）提供渐变颜色。但你可以用纯色来设计它。

只需设置background属性来设置过度滚动区域的样式，然后使用background-image它来设置渐变，如下所示：

body {
    background: black;
    background-image: linear-gradient(black, green);
}

这是一个有点黑客行为，不幸的是只对页面的顶部或底部有帮助，但看起来应该比白色不那么刺耳。

值得注意的是，这只是 Google Chrome 中的要求，Safari 在过度滚动期间应尊重背景渐变。