内容很少的 CSS 渐变

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; 
}