css - 如何使用 CSS 过渡淡入和淡出背景图像？

Question

我有一个在加载应用程序时没有背景图像的元素。然后，当单击按钮时，会向元素添加一个 CSS 类，该类会为该元素设置背景图像几秒钟。问题是 - 我无法让背景图像淡入和淡出。

我尝试了什么：

.MyBox.formElementInput {
background-repeat: no-repeat;
background-position: 65px center;
background-size: "contain";
-webkit-transition:background-image 2s ease-in-out;
-moz-transition: background-image 2s ease-in-out;
-o-transition: background-image 2s ease-in-out;
transition: background-image 2s ease-in-out;
}

.MyBox.formElementInput.showSpinner {
    background-image : url("/PmDojo/dojox/widget/Standby/images/loading.gif");
}

编辑：JQuery 不是一个选项。

Answer 1

没有 javascript 插件，CSS 不会褪色或动画背景图像。如果你想要一个唯一的 CSS 选项，你需要将它包装在一个 div 中，并淡入/淡出整个 div。

Answer 2

如果您也不介意div淡入/淡出的内容：

#div-with-bg{                
    -webkit-transition: opacity 1.5s linear;
    -moz-transition: opacity 1.5s linear;
    transition: opacity 1.5s linear;
    background: url(background.png);
    opacity: 0;
}
#div-with-bg:hover{
    opacity: 1;
}