Firefox的背景图像的CSS3转换不工作 [英] CSS3 transition of background-image for Firefox not working

问题描述

我的背景图片转换在Chrome中正常运行，但在Firefox中不执行任何操作。我是新的CSS3过渡。研究和我的语法似乎是正确的。从我已经阅读FF应该支持这一点。我在FF 12.0。这个CSS3转换如何在Firefox中不工作。

My background-image transition is working fine in Chrome, but does nothing in Firefox. I am new to CSS3 transitions. Did research and my syntax seems to be correct. From what I have read FF should support this. I am on FF 12.0. How come this CSS3 transition does not work in Firefox.

没有javascript。没有解决方法。

No javascript. No workarounds. Just an explanation of why this is failing would be wonderful.

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;
}

推荐答案

docs。

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

background-

background-image

这在空中还是有点高，在
当前工作草案中只有唯一渐变，没有背景图像所有在当前
编辑草案，和动画：无的背景图像在CSS
背景和边框模块3级编辑草案。但是，在Chrome 19 Canary中出现了
支持，这是设计师想要的。直到得到广泛的支持，这可以通过
图像精灵和背景位置或不透明度来伪造。'

This is still a little up in the air, with "only gradients" in the current Working Draft, no background-image at all in the current Editor’s Draft, and "Animatable: no" for background-image in CSS Backgrounds and Borders Module Level 3 Editor’s Draft. However, support has appeared in Chrome 19 Canary, and this is something that designers want. Until widespread support arrives this can be faked via image sprites and background-position or opacity.'

发现没有人实际上支持渐变（Chrome 17，FF 12，IE9）。只有Chrome支持background-image（这就是为什么它不工作在FF为我）。

At this time I have found that nobody actually supports gradients (Chrome 17, FF 12, IE9). Only Chrome supports background-image (that's why it doesn't work in FF for me).

这篇关于Firefox的背景图像的CSS3转换不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！