Css Firefox:Div元素上的背景图像转换赢得'；行不通

只需在Firefox和Chrome中观看。

我试过几种方法，比如

包含的最后一个链接的演示在FF上工作，我复制了源代码并用我的div尝试了它，但什么也没发生

有人知道发生了什么吗

---

谢谢

我可以用一个技巧来实现它

如果我们不能直接执行，我们将使用动画开始和结束之间的状态。在这种状态下，只需使用不透明度和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;
}

---

可能重复：请尝试此链接-

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