Question

当我使用渐变，内容很少时，渐变重复，我该如何防止？

http://jsfiddle.net/mcqpP/1/

我可以尝试使用html { height: 100%; }，但是当我的内容需要滚动时...渐变重复

http://jsfiddle.net/mcqpP/3/

如何解决此问题

Answer 1

您需要在CSS渐变上设置百分比，而不是绝对像素。只要您只关心现代浏览器（即您不关心IE6），我建议您远离图像，CSS工作正常。

我从这个问题的答案中得出答案，我希望我可以100次投票： How to get a vertical gradient background to work in all browsers?已接受的答案包含完全跨浏览器兼容性所需的一切。

以下是我举例并使其有效的地方：http://jsfiddle.net/HJvpf/1/

body {
    background: -moz-linear-gradient(top, red 0%, blue 100%);  
    background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue)); 
}

哦，在你的第二个jsFiddle链接中，它重复渐变的原因是因为你在html上设置了100％的高度，但是渐变位于body。您将height: 100%;移至body并且效果相当不错，但正如您在我的解决方案中所看到的，您根本不需要指定高度。

修改：所以你不希望它重复，但你也不希望它占据整个高度。只需设置repeat-x即可。 http://www.w3schools.com/css/pr_background-repeat.asp

body {
    background: -moz-linear-gradient(top, red, blue) repeat-x;  
    background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x; 
}

让底部渐变色填充剩下的空间：

body {
    background: blue -moz-linear-gradient(top, red, blue) repeat-x;  
    background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x; 
}

Answer 2

为什么不将渐变渲染为1px宽的图像并使用以下内容：

body {  
     background-color: #fff;
     background-image: url("images/background.jpg");
     background-position: center top;
     background-repeat: repeat-x; 
}

设置背景重复值将帮助您控制背景重复的方式。在这种情况下，它将被渲染为顶部的实心带。

http://www.w3schools.com/css/pr_background-repeat.asp

此外，使用图像应适用于所有浏览器，而moz-gradient可能会有问题。上面的图像方法应该在所有浏览器中呈现非常可预测的结果。

Answer 3

我遇到了同样的问题，但意识到这是有道理的，所以只是接受了滚动/重复渐变。您可以设置固定高度，而不是％，但为了确保渐变不重复，您需要将高度设置为比想要查看它的任何人的屏幕更大。你不知道人们有什么决议。我的建议是离开它。

CSS内容少的Gradients

3 个答案: