2012-11-23 69 views
1

使用背景大小爲400%的線性漸變。這允許我通過改變背景位置在懸停和活動狀態之間在漸變之間進行動畫處理。它在webkit中效果很好,但在firefox中沒有效果。似乎背景大小的屬性根本沒有被確認。線性漸變+背景大小在firefox中不起作用

Firefox基本上只是擠壓元素中的整個漸變,就好像background-size設置爲100%一樣。

Ive得到了一個超級簡單的頁面,說明此問題:

http://firefoxgradient.s.cboo.st

(交換機B/W的Firefox和WebKit看出差別)使用所有合適的供應商前綴的漸變

林和背景大小。

我在圖像上用背景大小修剪過,它的行爲和預期一樣。可能是一個特定於梯度的問題。

回答

3

問題是,在firefox background-size有兩個值的寬度和高度之一。如果你這樣做:background-size: 400% firefox翻譯它爲background-size: 400% auto。 auto是高度的值。要解決它只是寫: -moz-background-size: 400% 400% 這對我有用。

+0

就是這樣,很明顯。 webkit破壞我們。 –

+1

WebKit所做的只是不遵循規範,該規範位於http://www.w3.org/TR/css3-background/#the-background-size,並且非常清晰地說明背景大小中的單個值應該如何工作。當然,你可能會在那裏使用前綴版本,這可以合法地不遵循規範.... –