如何使用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轉換淡入和淡出背景圖像？

回答

相關問題