线性渐变+背景大小不工作在Firefox [英] linear gradient + background-size is not working in firefox

问题描述

Im使用背景大小为400％的线性渐变。这允许我通过改变背景位置在悬停和活动状态的梯度之间进行动画。它工作伟大的webkit，但不是在firefox。看起来好像背景大小的属性没有得到承认。

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基本上只是挤压元素中的整个渐变，如果background-size设置为100 ％。

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和webkit看到的区别）

(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.

推荐答案

问题是，在firefox background-size 有两个值，一个用于宽度，一个用于高度。如果你这样做： background-size：400％ firefox将其转换为 background-size：400％auto 。 auto是高度的值。要修复它只是写：
-moz-background-size：400％400％
这适用于我。

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.

这篇关于线性渐变+背景大小不工作在Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！