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

Firefox：Div元素的背景图像转换不起作用

1 个答案: