css - Firefox: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'); }

我试过很多东西，比如 Why is my CSS3 Transition not working in Firefox?或 Why does this CSS hover transition fail in FireFox?

包含的最后一个链接的演示适用于 FF，我复制了源代码并用我的 div 进行了尝试，但没有任何反应。

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

谢谢!

Answer 1

我可以用一个技巧来实现 (found here in SO) .

Demo JsFiddle

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

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