Html 背景图像url的CSS转换失败

以下示例在

我做了这个：

.褪色{
-o-转变：0.3s；
-moz跃迁：0.3s；
-khtml转换：0.3s；
-webkit转换：0.3s；
-ms转换：0.3s；
过渡：0.3s；
宽度：128px；高度：128px；
背景：url（'http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png')
}
.消失：悬停{
颜色：#b50000；
宽度：128px；高度：128px；
背景：url（'http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png')
}

---

为什么它可以在Chrome浏览器中正常工作，而不能在Firefox中正常工作？

您应该使用两个不同的元素，并在它们之间淡入淡出，而不是更改一个元素的背景图像

这家伙举了个例子：

---

我认为你不应该这样做，但显然Chrome只是对你很好…：-）

它在FF中不起作用，因为Firefox不支持转换背景图像，只支持背景颜色。 如果要转换背景图像，请使用两个单独的

：

.fade div{
-o-转变：0.3s；
-moz跃迁：0.3s；
-khtml转换：0.3s；
-webkit转换：0.3s；
-ms转换：0.3s；
过渡：0.3s；
宽度：128px；
高度：128px；
位置：绝对位置；
排名：0；
左：0；
}
.褪色{
位置：相对位置；
宽度：128px；
高度：128px；
}
.backone{
z指数：1；
背景：url（'http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png');
}
.二号后卫{
背景：url（'http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png');
不透明度：0；
z指数：5；
}
.fade:悬停，后退两步{
不透明度：1；
}
.fade:悬停.后退{
不透明度：0；
}

<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')
}