您還必須定義它如何淡化，您可以使用它opacity來實(shí)現(xiàn)此效果，然后是transition定義動(dòng)畫屬性（例如持續(xù)時(shí)間和緩動(dòng)）的參數(shù)。
CSS：
#section0{
opacity: 0;
transition: opacity 2s; /* Define the duration of the opacity animation */
background-image: url("images/top_back2.jpg");
}
JavaScript（在您的 setTimeout 中）：
$("#section0").css({
"opacity" : 1,
"background-image": "url(images/top_back.jpg)"
});
這是一個(gè)關(guān)于 JSFiddle 的演示，代碼為 https://jsfiddle.net/wtbmdaxc/
享受 ：）
更新：
為了避免文本被覆蓋，有兩種方法可以做到，要么將背景圖像分離到另一個(gè) DIV 中并將不透明度應(yīng)用于該新 DIV，要么創(chuàng)建一個(gè)偽元素。之前已經(jīng)在 SO 上回答了這兩個(gè)問題。
讓我們嘗試第一種方法，它將如何在您的情況下工作
HTML：
<div id="section0">
Example test. Lorem ipsum dolor sit amet.
<div id="bg-opacity"></div>
</div>
CSS：
#section0{
}
#section0 #bg-opacity{
position: absolute; /* Force this layer to appear at the top left of the div */
top: 0;
left: 0;
z-index: -1; /* Makes the image appear in the back and not covering the texts */
opacity: 0;
transition: opacity 2s; /* Define the duration of the opacity animation */
height: 500px;
width: 500px;
background-image: url("https://media.giphy.com/media/tIeCLkB8geYtW/giphy.gif");
}
JavaScript：
setTimeout(function(){
$("#bg-opacity").css({
"opacity" : 1,
"background-image": "url(https://media.giphy.com/media/tIeCLkB8geYtW/giphy.gif)"
});
}, 300);
還有一個(gè)關(guān)于 JSFiddle 的新演示：https ://jsfiddle.net/zr7Lf0m5/
