如何使用CSS转换淡入和淡出背景图像？

我有一个元素，当应用程序加载时没有背景图像。然后当点击一个按钮时，一个CSS类被添加到元素中，该元素为该元素设置背景图像几秒钟。问题是 - 我无法让背景图像淡入和淡出。如何使用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是不是一种选择。

来源

2012-11-19 antonpug

你是什么意思？眼下在 – antonpug

可能重复的是“滑”入位，而不是“淡入淡出”：http://stackoverflow.com/questions/5947582/fade-background-images-with-css3 –

@PatrickJamesMcDougle耶没有。 – antonpug

如果没有JavaScript插件，CSS不会淡化或制作背景图片。如果你想要一个唯一的CSS选项，你需要将它包装在一个div中，并淡入/淡出整个div。

来源

2012-11-19 19:19:11 kthornbloom

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

来源

2014-01-23 00:20:21 Justin

如何使用CSS转换淡入和淡出背景图像？

回答

相关问题