小內容的CSS漸變

Question

當我使用漸變，內容很少，漸變重複時，我該如何防止？

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

我可以嘗試使用html { height: 100%; }，但是當我的內容需要滾動......梯度重複

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

我怎樣才能解決這個

Answer 1

爲什麼不使您的梯度作爲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-梯度可能是有問題的。上面的圖像方法應該在所有瀏覽器中呈現非常可預測的結果。

Answer 2

我有同樣的問題，但意識到它是有道理的，所以只接受滾動/重複漸變。你可以設置一個固定的高度，而不是％，但爲了確保漸變沒有重複，你需要將高度設置得比任何人想要查看它的屏幕都大。你不知道人們有什麼決議。我的建議是放棄它。

Answer 3

您需要設置CSS漸變的百分比，而不是絕對像素。只要你只關心現代瀏覽器（即你不關心IE6），那麼我建議你遠離圖像，CSS工作正常。

我從這個問題的答案拉我的答案，我希望我可以upvote 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; 
}