線性梯度屬性有什麼問題？

Question

我試圖解決一個問題，我寫了這個代碼：

body { 
background-image: -moz-linear-gradient(top, white 0%, #facd8a 100%); 
background-image: -webkit-linear-gradient(top, white 0%, #facd8a 100%); 
background-image: -o-linear-gradient(top, white 0%, #facd8a 100%); 
background-image: linear-gradient(top, white 0%, #facd8a 100%); 
} 

但是，代碼仍然失去了一些東西。我不知道如何解決。我想我應該添加一個CSS缺失規則。

此外，爲什麼上面的CSS代碼似乎有重複的線性梯度屬性？

Answer 1

您需要將100%高度添加到body元素，以便它不重複。請注意，由於html是身體的父親，身體需要從父母計算寬度。所以爲html添加100％也是如此。

如果主體內容將大於視口高度，則用min-height替換高度。

body { 
 
    background-image: -moz-linear-gradient(top, white 0%, #facd8a 100%); 
 
    background-image: -webkit-linear-gradient(top, white 0%, #facd8a 100%); 
 
    background-image: -o-linear-gradient(top, white 0%, #facd8a 100%); 
 
    background-image: linear-gradient(top, white 0%, #facd8a 100%); 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
}