CSS漸變在身體，但不是全長與回退

Question

我知道你可以設置一個特定高度的身體標記的漸變。

所以我有我的身體背景有300px高度的藍色漸變，然後繼續純白色。

但是我希望對舊版瀏覽器的漸變有一個回退，我如何確保這些300px將具有純藍色，然後在不支持css3漸變的舊瀏覽器中爲白色？

Answer 1

勞倫斯的回答作品，但如果你不想沒有語義引入額外的元素，可以使html背景白色，給body 300像素的高度。

html { 
    background: white} 
body { 
    margin:0; 
    padding:8px; 
    max-height:300px; 
    overflow:visible; 
    background:blue; 
    background:linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); 
} 

Answer 2

如果您的頁面中包含modernizr，您可以將css3樣式定位到支持它們的瀏覽器，根據瀏覽器是否支持css3-gradiants，您的身體標記可以獲得一個類，並且您可以適當地進行樣式設置。

.cssgradients 
{ 
background: /* CSS Gradiant */ 
} 

.no-cssgradients 
{ 
background: /* link to 1px by 300px blue background */ top left repeat-x; 
} 

Answer 3

設置爲舊版瀏覽器的風格，再加入它CSS3功能的瀏覽器：

#div{ 
    background: blue; 
    background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); 
} 

將回落到蘭若梯度不支持。

編輯：有點誤讀你的問題。

我認爲最簡單的解決方案是將白色添加到body標籤，然後將藍色plain/gradient添加到嵌套在body標籤中的div。

希望這有助於

Answer 4

試試這個

.cssgradients 
{ 
background: /* CSS Gradiant */ 
} 

.no-cssgradients 
{ 
background: /* link 1px by 300px blue background */ top left repeat-x; 
/* more */ 
}