线性渐变+背景大小在firefox中不起作用

Question

我使用背景大小为400％的线性渐变。这允许我通过改变背景位置来设置悬停和活动状态之间的渐变动画。它在webkit中运行良好，但在firefox中运行不佳。似乎背景大小的属性根本没有得到承认。

Firefox基本上只是挤压元素中的整个渐变，就像background-size设置为100％一样。

我有一个超级简单的页面来演示这个问题：

http://firefoxgradient.s.cboo.st

（切换b / w firefox和webkit以查看区别）

我使用所有适当的供应商前缀用于渐变和背景大小。

我在图像上使用背景大小进行了修改，并且表现得如预期的那样。可能是特定于梯度的问题。

Answer 1

问题是，在firefox background-size中有两个值，一个是宽度，另一个是高度。如果你这样做：background-size: 400% firefox会将其翻译为background-size: 400% auto。 auto是高度的值。修复它只需写： -moz-background-size: 400% 400% 这适合我。