如何在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上打开文档在谷歌Chrome上但它似乎也发生在Safari上。

任何想法会导致什么？

Answer 1

发生这种情况的原因是因为OSX中的过度滚动（或＃34;弹性滚动＆＃34;）。

您无法将过度滚动区域（默认为白色）设为渐变色。但是你可以用纯色调它。

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

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

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

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