转换属性背景图像在Firefox上不起作用(使用前缀)

Question

我有一个div，当我悬停在它上面时，它应该会将背景图像从一个更改为另一个。它在chrome上完美工作，在firefox或IE上根本不工作。

我已经查看了整个相关的MDN参考页面，并尝试了几个不同的选项，但我找不到问题的答案，所以我在这里尝试看看是否有人遇到了同样的行为，并最终知道解决方案。

这里有一个链接，可以查看发生了什么：http://codepen.io/thevalent/pen/RWqWGJ?editors=110

这是css端：

#wrapper{
    background-image: url(dropText.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 15em;
    border: 2px dashed #ccc;
    padding: 0px 0px;
    margin: 20px auto;
    opacity: 0.8;
    -moz-transition: background-image 0.4s  ease-in-out 1s;
    -webkit-transition: background-image 0.4s  ease-in-out 1s;
    transition: background-image 0.4s  ease-in-out 1s;
    -o-transition: background-image 0.4s  ease-in-out 1s;
  }
#wrapper:hover{
    -moz-transition: background-image 0.4s  ease-in-out 1s;
    -webkit-transition: background-image 0.4s  ease-in-out 1s;
    transition: background-image 0.4s  ease-in-out 1s;
    -o-transition: background-image 0.4s  ease-in-out 1s;
    background-image: url(uploadPic.png);
    opacity: 1;
  }

我试图用"all"替换背景图像属性，但它再次只适用于chrome。正如你在上面的链接上看到的，如果我把它改成背景色，它就可以正常工作。

Answer 1

根据规范，转换应用于可设置动画的属性。根据规范，background-image属性是可设置动画的，而不是。因此，Firefox和Internet Explorer都符合规范。Chrome可能正在探索非规范/专有功能。

对于开发人员和设计师应该如何转换图像，未来有一些想法。您可以通过阅读CSS图像转换来开始对这些想法的研究。

TabAtkins在他的未来CSS演示中简要讨论了cross-fade函数。