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

【问题标题】：Linear gradients not working in Firefox 4线性渐变在 Firefox 4 中不起作用
【发布时间】：2011-07-28 19:07:00
【问题描述】：

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

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

结果是：

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

【问题讨论】：

【解决方案1】：

这是因为 body 的高度很小，并且默认情况下背景是重复的。

你可以让它不再重复：

body { background-repeat: no-repeat; }

或将容器的高度（html）设为窗口的大小：

html { height: 100%; }

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：