问题
Im using a linear gradient with a background-size of 400%. this allows me to animate between gradients on hover and active state by changing the background-position. It works great in webkit but not in firefox. It seems as though the background-size property is not acknowledged at all.
Firefox is basically just squeezing the whole gradient in the element as if background-size is set to 100%.
Ive got a super simple page that demonstrates the problem:
http://firefoxgradient.s.cboo.st
(switch b/w firefox and webkit to see the difference)
Im using all the proper vendor prefixes for gradients and background-size.
I tinkered around with background-size on an image and it behaved as expected. Might be a gradient specific issue.
回答1:
The problem is, that in firefox background-size has two values one for the width and one of the height. If you do it like this: background-size: 400% firefox translates it to background-size: 400% auto. The auto is the value for the height. To fix it just write:
-moz-background-size: 400% 400%
this works for me.
来源：https://stackoverflow.com/questions/13523559/linear-gradient-background-size-is-not-working-in-firefox