如何在内容不同时淡入的情况下淡入到新背景

当我的页面转到新页面时，我试图通过将新图像缓慢地淡出页面内容来更改页面的背景。然而，当我尝试淡入新图像时，实际上整个页面都会淡入，因为包含背景的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

您基本上已经通过说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/

您可以使用两个重叠的div(http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div)和褪色的一个与背景。

相关内容

最新更新

热门标签：