線性漸變在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

回答