CSS中的最大和最小漸變大小

Question

background: -webkit-linear-gradient(#FFFFFF, #EAEAEA); 
background: -o-linear-gradient(#FFFFFF, #EAEAEA); 
background: -moz-linear-gradient(#FFFFFF, #EAEAEA); 
background: linear-gradient(#FFFFFF, #EAEAEA); 

我基本上想要做的是有一些最小和最大漸變長度（例如，漸變不能小於500px，即使背景是，即使背景是，也不能大於500px）。

background-size:500px; 

（藏漢，因爲它與background-repeat:y-repeat合併）以後從頂部（也是我想重演，但是，這並不工作，因爲梯度是它維護：我一直在使用這個方法嘗試其通過元素的其餘部分的結束顏色）。

很快，我想知道是否有辦法在特定高度後停止漸變，只允許它覆蓋元素的一部分（因此，防止它在所有頁面上看起來不同，使用不同大小的元素），而不使用圖像作爲背景。不過，我也想知道在兼容性和努力方面，使用這種方法是否值得。

謝謝！

Answer 1

你只需要添加顏色停止對你的梯度，像這樣：

Working Example

body, html { 
 
    height:200%; 
 
} 
 
body { 
 
    background: -moz-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat; 
 
     background: -webkit-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat; 
 
}

MDN Documentation for Linear-gradient

Answer 2

所以我做了如下試驗小提琴，似乎如果你spe cify a background-size，那麼無論元素的尺寸如何，漸變的大小都將調整爲該大小（請注意，您必須明確定義寬度和高度以使background-size在Firefox中正常工作）。

http://jsfiddle.net/myajouri/y4b3Z/

我已經在最新的Chrome，Safari和Firefox選中此，並期待在所有三個borwsers相同。