线性梯度属性有什么问题？

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