CSS转换背景图片网址失败

Question

Following examples found on Fade Effect on Link Hover?

I made this: http://jsfiddle.net/felipelalli/ns9d1vug/

<div class="fade"/>

.fade {
-o-transition: 0.3s;
-moz-transition: 0.3s;
-khtml-transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;

 width:128px;height:128px;
background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png')
}

.fade:hover {
color: #b50000;
    width:128px;height:128px;
 background:url('http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png')
}

Why it works fine in Chrome but not Firefox?

Answer 1

It isn't working in FF, because Firefox does not support transitioning a background image, only background-color. If you want to transition a background image, use two separate <div> :

 .fade div { -o-transition: 0.3s; -moz-transition: 0.3s; -khtml-transition: 0.3s; -webkit-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; width:128px; height:128px; position:absolute; top:0; left:0; } .fade{ position:relative; width:128px; height:128px; } .backone{ z-index:1; background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png'); } .backtwo{ background:url('http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png'); opacity:0; z-index:5; } .fade:hover .backtwo{ opacity:1; } .fade:hover .backone{ opacity:0; } 

 <div class="fade"> <div class="backone"></div> <div class="backtwo"></div> </div> 

Answer 2

You should use two different elements, and fade between them, instead of changing the background image for one element.

This guys has made an example: http://css3.bradshawenterprises.com/cfimg/

I don't think you should be able to do this, but apparently Chrome is just being nice to you... :-)