如何在沒有內容淡入的情況下淡入淡出的新背景？

我試圖通過在頁面內容後面慢慢淡出新圖像來更改我的頁面背景。但是，當我嘗試淡入新圖像時，實際上整個頁面都會淡入，因爲包含背景的div也包含內容。包含背景圖像變化的div是「nextImage」。如何在沒有內容淡入的情況下淡入淡出的新背景？

<body> 
<div id="nextImage"> 
    Bunch of Content 
</div> 
</div> 
</body>

這裏是我想要得到的工作是一個新的頁面上的JavaScript：

<script type="text/javascript"> 
    $('#nextImage').css('background-image', 'url(Tranquil.jpg)').hide(); 
    $('#nextImage').fadeIn(5000); 
</script>

這裏的CSS：

body 
{ 
    background-image:url("abstract1.jpg"); 
    background-repeat: no-repeat; 
    background-size:100%; 
    background-attachment:fixed; 
    font-family:font-family: Helvetica,Arial, sans-serif; 
    text-align:center; 
    width: 100%; 
    height: 100%; 
} 
#nextImage 
{ 
    background-image=""; 
    background-repeat: no-repeat; 
    background-size:100%; 
    background-attachment:fixed; 
    font-family:font-family: Helvetica,Arial, sans-serif; 
    text-align:center; 
    width: 100%; 
    height: 100%; 
    z-index:1; 
}

感謝提前你的幫助：D

來源

2012-02-29 Gavin Sellers

那麼你基本上回答了你自己的問題，說the div containing the background also contains the content

獨立的背景DIV和內容DIV，以便需要時沒有此影響內容

<body> 
    <div id="nextImage"> 
    </div> 
    <div id="content"> 
     Bunch of Content 
    </div> 
</body>

看看我的例子http://jsfiddle.net/Hn9w4/

來源

2012-02-29 23:44:23 Henesnarfel

這不起作用，因爲背景顯示在頁面頂部。更不用說你必須使用javscript來將nextImage的高度調整到body的高度。 – 2012-02-29 23:46:13

所有你需要做的就是把'position：absolute;'放在你的背景div – Henesnarfel 2012-02-29 23:48:33

上..好好保存它在一個地方，但現在它只是淡入和掩蓋了內容。 – 2012-02-29 23:52:31

，可以使用兩個疊加的div（HTTP你可以淡出的背景： //stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div）和淡入淡出的背景。

來源

2012-03-01 00:03:41

您可以使用兩個覆蓋div（http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div）並淡入淡出背景。 – 2012-03-01 00:04:46

如何在沒有內容淡入的情況下淡入淡出的新背景？

回答

相關問題