如何通过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

如果您不介意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;
}