Question

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

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

结果是： firefox grads went wrong

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

Answer 1

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

你可以不重复：

body { background-repeat: no-repeat; }

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

html { height: 100%; }

虽然注意到后者在滚动时有时会产生意想不到的效果。

Answer 2

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

或将高度设置为<body>（以及<html>），如下所示：

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