Firefox的背景图像的CSS3过渡不起作用

Question

我的背景图片转换在Chrome中运行良好,但在Firefox中无效.我是CSS3过渡的新手.研究和我的语法似乎是正确的.据我所知,FF应该支持这一点.我在FF 12.0上.为什么这个CSS3过渡在Firefox中不起作用.

没有javascript.没有解决方法.只是解释为什么这是失败将是美好的.

http://jsfiddle.net/VCdGt/3/

a.call_to_action
{
    text-decoration: none;
    display: block;
    color: #232744;
    font-size: 20px;
    font-weight: bold;
    height: 47px;
    width: 185px;
    overflow: hidden;
    margin: 10px auto 15px auto;
    text-align: center;
    border: none;
    background: yellow;
    background-image: url(http://www.pslover.com/images/thumb/2751.jpg);
    -webkit-transition: background-image .5s linear;
    -moz-transition: background-image .5s linear;
}

a.call_to_action:hover {
    background: orange;
    background-image: url(http://www.tutorialdash.com/avatars/3b1f70c20325d8676ce1f56cb9b43f17.gif);
    color: #4F4246;
}

Answer 1

在MDN文档中找到答案.

http://oli.jp/2010/css-animatable-properties/#background-image

背景图片

这仍然有点悬而未决,当前工作草案中只有"渐变",当前编辑草案中根本没有背景图像,CSS背景和边框模块级别中背景图像的"动画:否" 3编辑的草稿.但是,Chrome 19 Canary中出现了支持,这是设计师想要的.在广泛的支持到来之前,这可以通过图像精灵和背景位置或不透明度伪造.

这时我发现没有人真正支持渐变(Chrome 17,FF 12,IE9).只有Chrome支持背景图片(这就是为什么它不适用于我的FF).