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

我最近尝试将渐变背景应用于仅使用CSS3的网页。同时检测出下面的代码：线性渐变在Firefox 4中不起作用

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

结果是： firefox grads went wrong

不正是我一直在寻找... 任何想法是怎么回事？操作系统是Win7 64bit和Firefox 4. 谢谢！

2011-04-03 GZaidman

什么是预期的结果？ – Zakaria 2011-04-03 21:04:28

这个[MDN页面]的第一个例子（https://developer.mozilla.org/en/using_gradients） – GZaidman 2011-04-03 21:10:46

您可能需要添加no-repeat到背景属性...

或设置高度为<body>（和<html>）像这样：

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

2011-04-03 21:10:35 Matijs

谢谢！我猜firefox在设置没有声明宽度的元素的渐变方面存在问题.... – GZaidman 2011-04-03 21:14:33

@GZaidman它不是Firefox的问题，它完全按照你所说的去做。 – 2011-04-04 15:48:45

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

您可以让它不重复：

body { background-repeat: no-repeat; }

或使容器（html）窗口大小的高度：

html { height: 100%; }

但要注意的是，后者有时可有滚动时出现意想不到的效果。

2011-04-03 21:10:05

回答