我有一个简单的页面，其背景有两张图片，一张在左边，一张在右边。
基本上是一个绝对定位的固定 DIV (#Background)，包含 2 个 float DIV。
在这些 DIV 之上，我有多个 DIV 都嵌套在一个 container (#mainDIV) 中。
奇怪的是，当我向下滚动时，正文背景与 #Background DIV 重叠。
有什么建议吗？
CSS
* { padding: 0; margin: 0; }
html,
body{
min-height:100%;
width:100%;
z-index:-10;
}
#Background{
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
z-index:1;
}
#Background_Left{
float:left;
width:50%;
height:100%;
background:url(images/background_left.jpg) fixed;
background-repeat:no-repeat;
background-position:left;
background-size:contain;
}
#Background_Right{
float:right;
width:50%;
height:100%;
background:url(images/background_right.jpg) fixed;
background-repeat:no-repeat;
background-position:right;
background-size:contain;
}
#mainDIV{
position:relative;
margin: 0 auto;
width:1000px;
min-height:100%;
z-index:10;
}
#BotoesContainer{
position:relative;
height:200px;
background:url(images/banner.png);
background-repeat:no-repeat;
}
#ConteudoContainer{
position:relative;
padding-bottom:70px;
}
HTML
<body>
<div id="Background">
<div id="Background_Left"></div>
<div id="Background_Right"></div>
</div>
<div id="mainDIV">
<div id="BotoesContainer"></div>
<div id="ConteudoContainer">Put lots of text here to scroll down</div>
</div>
</body>
我删除了所有非必要的代码，你可以看到当前页面有"scroll overlap" Demo here
最佳答案
当您向下滚动时，您的 div 将结束。您可以通过添加
position:fixed;
到#Background
关于html - 主体背景重叠 Div 图像背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31792552/