线性渐变在 Firefox 4 中不起作用

Question

我最近尝试仅使用 CSS3 将渐变背景应用于网页。 测试以下代码时：

body {background: -moz-linear-gradient(top, blue, white);}

结果是：

不完全是我想要的...... 知道发生了什么事吗？ 操作系统为Win7 64位和Firefox 4。 谢谢！

Answer 1

您可能想要将 no-repeat 添加到该背景属性...

或为 （以及 >）像这样：

html { height: 100%; }
body { background: -moz-linear-gradient(top, blue, white); height: 100%; }

Answer 2

发生这种情况是因为主体的高度很小，并且默认情况下背景是重复的。

您可以使其不重复：

body { background-repeat: no-repeat; }

或将容器 (html) 的高度设置为窗口的大小：

html { height: 100%; }

但请注意，后者有时在滚动时会产生意想不到的效果。