Javascript 你怎样才能淡入一个新的背景而不让内容也淡入？_Javascript_Jquery_Html_Css

Javascript 你怎样才能淡入一个新的背景而不让内容也淡入？

javascript jquery html css

Javascript 你怎样才能淡入一个新的背景而不让内容也淡入？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当我的页面转到新页面时，我试图通过在页面内容后面慢慢淡入新图像来改变页面的背景。但是，当我尝试淡入新图像时，整个页面实际上会淡入，因为包含背景的div也包含内容。包含背景图像更改的div为“nextImage” 提前感谢您的帮助：D您基本上回答了自己的问题，您说包含背景的div也包含内容将背景div和内容div分开，以便可以根据需要淡入背景而不影响内容 <body> <div id="nextImage"> </div> <div i

当我的页面转到新页面时，我试图通过在页面内容后面慢慢淡入新图像来改变页面的背景。但是，当我尝试淡入新图像时，整个页面实际上会淡入，因为包含背景的div也包含内容。包含背景图像更改的div为“nextImage”

提前感谢您的帮助：D

您基本上回答了自己的问题，您说

包含背景的div也包含内容

将背景div和内容div分开，以便可以根据需要淡入背景而不影响内容

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


一堆内容

在这里查看我的示例

您可以使用两个叠加的div(http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div)而淡入淡出的是有背景的。

这不起作用，因为背景显示在页面顶部。更不用说你必须使用javscript来调整下一个页面的高度到身体的高度在您的背景divwell。。这使它保持在一个位置，但现在它只是淡入并掩盖了内容。@GavinSellers查看我在JSFIDdle上添加的示例。您可以使用两个重叠的div（），并将其中一个与背景淡入淡出。

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

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;
}

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