如何在不淡入內容的情況下淡入新背景？

Question

我試圖通過將新圖像逐漸淡入頁面內容的后面來更改進入新頁面時頁面的背景。 但是，當我嘗試淡入新圖像時，實際上整個頁面都會淡入，因為包含背景的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

Answer 1

好吧，您基本上已經回答了自己的問題，說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/

Answer 2

您可以使用兩個疊加的div（http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div），然后使用背景淡入一個。

如何在不淡入內容的情況下淡入新背景？

問題描述

2 個解決方案

解決方案1
1 已采納 2012-02-29 23:44:23

解決方案2
0 2012-03-01 00:03:41

如何在不淡入內容的情況下淡入新背景？

問題描述

2 個解決方案

解決方案1 1 已采納 2012-02-29 23:44:23

解決方案2 0 2012-03-01 00:03:41

解決方案1
1 已采納 2012-02-29 23:44:23

解決方案2
0 2012-03-01 00:03:41