火狐：Div 元素的背景图像过渡不起作用

Question

只需在Firefox和Chrome中观看此内容即可。 http://jsfiddle.net/tbwxm/

        div#back {
        background: url('http://dummy-images.com/abstract/dummy-250x250-Rope.jpg');
        width: 250px; height: 250px;
           -ms-transition: all 1.5s ease 0;
          -moz-transition: all 1.5s ease-in-out;
          -webkit-transition: all 1.5s ease 0;
          -o-transition: all 1.5s ease 0;
        transition: all 1.5s ease-out 0;
    }
    div#back:hover { 
background:url('http://dummy-images.com/abstract/dummy-250x250-Floral.jpg'); }

我尝试了几件事，例如为什么我的CSS3过渡不在Firefox中工作？或为什么这CSS悬停在Firefox中失败？

最后一个链接的随附的演示在FF上起作用，我复制了源代码并与我的DIV尝试了，但什么也不会发生。

有人知道发生了什么事吗？

谢谢！

Answer 1

我可以用技巧来实现它（在这里找到）。

演示JSFIDDLE

如果我们不能直接这样做，我们将在动画的开始和结束之间使用状态。在这种状态下，只需使用不透明度和z索引即可。

div#back {
    position: relative;
    width: 250px; height: 250px;
}
#back:before, #back:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 1;
}
#back:before {
    background-image: url('http://dummy-images.com/abstract/dummy-250x250-Rope.jpg');
    z-index: -1;
    transition: opacity 2s ease;
}
#back:after {
    background-image: url('http://dummy-images.com/abstract/dummy-250x250-Floral.jpg');
    z-index: -2;
}
#back:hover:before {
    opacity: 0;
}