Question

只是将渐变背景实施到一个延伸到折叠的网页。渐变工作并且看起来很完美，直到高度为10像素的页脚是渐变开始的颜色。因此，渐变似乎是重复＆＃34;

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在大多数浏览器中都有余量。因此，垂直滚动条实际上你设置了100％的高度而不是设置超过100 ...

在DevTools或Firebug中，您可以显示这些默认值（Firebug：右侧的HTML / Style，它在下拉列表中），并且看到身体上有8px的边距，因此身体高于100％x 16px，重复渐变的确切值（在Firefox中）。

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

小提琴：http://jsfiddle.net/ey7kfog3/4/

编辑：它出现在大多数reset.css中，类似于Eric Meyer的一个或normalize

Answer 2

我为你修好了：Fiddle

CSS：

body, html {
height:100%;
width: 100%;
}
.background {
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;
height: 100%;
width: 100%;
}

HTML：

<div class="background"></div>

然后你可以，

postition: fixed;

它让你获得与身体相同的效果

希望它适用于你

Answer 3

它看起来很奇怪，我不知道它为什么会像这样工作！最快的解决方法是

body {
   min-height:94%;
}

查看 FIDDLE

Answer 4

您可以将div用作容器。我使用固定设置为0的位置左，右，上，下并添加溢出自动，因为它应该作为主体容器。

同时隐藏身体的滚动条。查看更新后的fiddle。

html {
   height:100%
}

body {
   min-height:100%; overflow:hidden;
}
div.test {position:fixed; top:0; bottom:0; left:0; right:0; overflow:auto;
    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';
margin:0;
}

HTML背景渐变重复

4 个答案: