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

【问题标题】：How to stop the white from appearing when scrolling down on an html page?在html页面上向下滚动时如何阻止白色出现？
【发布时间】：2015-12-19 08:45:01
【问题描述】：

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

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 上。

有什么想法会导致这种情况吗？

【问题讨论】：

你能发布更多你的代码吗？单独运行时，没有白条。 PS 我正在 Chrome 上测试。
不要忘记px 并始终添加<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
background-size:100% 100%; 可以提供帮助。

标签： html css web background

【解决方案1】：

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

您不能将默认为白色的过度滚动区域设置为渐变色。但是你可以用纯色来设计它。

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

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

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

值得注意的是，这只是谷歌浏览器的要求，Safari在过度滚动时应该尊重背景渐变。

【讨论】：