css - HTML背景渐变重复

Question

刚刚在网页中实现了渐变背景，使其超出了首屏。渐变效果看起来很完美，直到页脚高度差距为 10 像素，这是渐变开始的颜色。因此，渐变似乎是“重复”的

http://s30.postimg.org/6r64lcqkx/problem.png

就是这样。我已经尝试过 HTML/Body 高度修复:

CSS:

html {
   height:100%
}

body {
   min-height:100%;
}

但是在窗口的确切高度重复渐变只会让事情变得更糟。

目前body元素的代码如下

CSS:

body {
    background: #650000; /* Old browsers */
    background: -moz-linear-gradient(top,  #650000 0%, #d40000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#650000), color-stop(100%,#d40000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #650000 0%,#d40000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #650000 0%,#d40000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #650000 0%,#d40000 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #650000 0%,#d40000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#650000', endColorstr='#d40000',GradientType=0 ); /* IE6-9 */
    font-family: 'helveticaneue_bold';
    font-size:11px;
}

Wijnand 提供:http://jsfiddle.net/ey7kfog3/

Answer 1

默认情况下，

body 在大多数(如果不是全部)浏览器中都有一个 ma​​rgin。因此，当您实际上将高度设置为 100% 且未设置超过 100 时，垂直滚动条...

在 DevTools 或 Firebug 中，您可以显示这些默认值(Firebug:右边的 HTML/Style，它在下拉列表中)并看到 body 上有 8px 的边距，因此 body 比 100% 高 16px，准确重复渐变的值(在 Firefox 中)。

只需添加 body { margin: 0; }，不再有滚动条或重复渐变。

fiddle :http://jsfiddle.net/ey7kfog3/4/

编辑:它存在于大多数 reset.css 中，类似于 Eric Meyer 的或 normalize。