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

我尝试用＆＃34; all＆＃34;替换background-image属性。但它再一次只适用于chrome。另外正如您在上面的链接中看到的，如果我将其更改为背景颜色，它可以正常工作。

Answer 1

转换适用于动画属性per the specification。 background-image属性不可动画，per the specification。因此，Firefox和Internet Explorer都符合规范。 Chrome可能正在探索非规范/专有功能。

关于开发人员和设计人员应如何转换图像，未来有一些想法。您可以通过阅读CSS Image Transitions开始学习这些想法。

Tab Atkins在他的Future of CSS演示文稿中简要讨论了cross-fade函数。

转换属性background-image在Firefox上不起作用（使用前缀）

1 个答案: