我有一个装有儿童div的容器DIV，在子div中我有5个部分。我希望第2节和第4节有一个固定的背景图像，这样当我滚动时，图像将保持静止。我想重现文章滚动的非常酷的几乎视差效果，可以在这里看到：http://www.polygon.com/2013/1/17/3882754/oswald-epic-mickey-disney
然而，背景图像仍然在父div中！由于某种原因，我不能让它溢出来。我非常感谢所有的帮助！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
html, body,
.container,
.cbp-fbscroller,
.cbp-fbscroller section {
height: 100%;
}
.cbp-fbscroller section {
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
#fbsection2 {
background-image: url(http://solarle.cdn2.cafe24.com/tistory/i-beautiful.jpg);
}
#fbsection4 {
background-image: url(http://solarle.cdn2.cafe24.com/tistory/geek2.jpg);
}
</style>
</head>
<body>
<div style="width: 700px">
<div id="cbp-fbscroller" class="cbp-fbscroller">
<section id="fbsection1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut massa ac mauris dictum porttitor quis in libero. Etiam orci nulla, placerat eget sagittis ut, porta a dolor. Duis ac lacinia libero. Integer fermentum erat eget urna mollis tristique. Mauris et sapien leo. Suspendisse et lorem eget massa consectetur elementum eu ac neque. Nunc eu nisl tellus. Aliquam erat volutpat. Quisque tristique, arcu sit amet commodo euismod, leo dolor sagittis ante, et fermentum nisi felis eu ipsum. Phasellus id elit lacus. Ut eget nisi non sapien tincidunt tristique eget vel neque. Nullam mi ipsum, blandit eget posuere a, mattis fermentum nunc. In a eros eget dui semper scelerisque a non neque. Curabitur aliquet tempus venenatis. Nam ante turpis, tincidunt at tristique vel, scelerisque ut libero.</p>
</section>
<section id="fbsection2">
<br />
<blockquote class="bigquote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut massa ac mauris dictum porttitor quis in libero. Etiam orci nulla, placerat eget sagittis ut, porta a dolor. Duis ac lacinia libero. Integer fermentum erat eget urna mollis tristique. Mauris et sapien leo. Suspendisse et lorem eget massa consectetur elementum eu ac neque. Nunc eu nisl tellus. Aliquam erat volutpat. Quisque tristique, arcu sit amet commodo euismod, leo dolor sagittis ante, et fermentum nisi felis eu ipsum. Phasellus id elit lacus. Ut eget nisi non sapien tincidunt tristique eget vel neque. Nullam mi ipsum, blandit eget posuere a, mattis fermentum nunc. In a eros eget dui semper scelerisque a non neque. Curabitur aliquet tempus venenatis. Nam ante turpis, tincidunt at tristique vel, scelerisque ut libero.</blockquote>
<br />
</section>
<section id="fbsection3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut massa ac mauris dictum porttitor quis in libero. Etiam orci nulla, placerat eget sagittis ut, porta a dolor. Duis ac lacinia libero. Integer fermentum erat eget urna mollis tristique. Mauris et sapien leo. Suspendisse et lorem eget massa consectetur elementum eu ac neque. Nunc eu nisl tellus. Aliquam erat volutpat. Quisque tristique, arcu sit amet commodo euismod, leo dolor sagittis ante, et fermentum nisi felis eu ipsum. Phasellus id elit lacus. Ut eget nisi non sapien tincidunt tristique eget vel neque. Nullam mi ipsum, blandit eget posuere a, mattis fermentum nunc. In a eros eget dui semper scelerisque a non neque. Curabitur aliquet tempus venenatis. Nam ante turpis, tincidunt at tristique vel, scelerisque ut libero.</p>
</section>
<section id="fbsection4">
<br />
<blockquote class="bigquote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut massa ac mauris dictum porttitor quis in libero. Etiam orci nulla, placerat eget sagittis ut, porta a dolor. Duis ac lacinia libero. Integer fermentum erat eget urna mollis tristique. Mauris et sapien leo. Suspendisse et lorem eget massa consectetur elementum eu ac neque. Nunc eu nisl tellus. Aliquam erat volutpat. Quisque tristique, arcu sit amet commodo euismod, leo dolor sagittis ante, et fermentum nisi felis eu ipsum. Phasellus id elit lacus. Ut eget nisi non sapien tincidunt tristique eget vel neque. Nullam mi ipsum, blandit eget posuere a, mattis fermentum nunc. In a eros eget dui semper scelerisque a non neque. Curabitur aliquet tempus venenatis. Nam ante turpis, tincidunt at tristique vel, scelerisque ut libero.</blockquote>
<br />
</section>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
简短的回答：你不能让背景超出div。
您正在寻找的答案
我添加了一个带有id的新div：#backimage，我还为你的包装器分配了一个id：#wrapper。我把#backimage推到了页面上的固定位置。我还添加了一个负的z-index，因此它将显示在其他div之后（在这种情况下为#wrapper）。最后，我为#wrapper添加了背景颜色，因此内容更具可读性。阅读代码中的注释以了解它的作用。
#backimage {
position: fixed; /*if you make this position: absolute the background will scroll with the content*/
width: 100%;
top: 50px;
bottom: 50px;
background: url(http://solarle.cdn2.cafe24.com/tistory/i-beautiful.jpg) no-repeat center top;
z-index: -100; /*low z-index so this div shows behind the other divs as background*/
}
#wrapper{
background-color: rgba(256, 256, 256, 0.8); /*background-color of the wrappper so the image doesn t make the content unreadable*/
margin: auto;
}
完整文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
html, body,
.container,
.cbp-fbscroller,
.cbp-fbscroller section {
height: 100%;
}
.cbp-fbscroller section {
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
#backimage {
position: fixed; /*if you make this position: absolute the background will scroll with the content*/
width: 100%;
top: 50px;
bottom: 50px;
background: url(http://solarle.cdn2.cafe24.com/tistory/i-beautiful.jpg) no-repeat center top;
z-index: -100; /*low z-index so this div shows behind the other divs as background*/
}
#wrapper{
background-color: rgba(256, 256, 256, 0.8); /*background-color of the wrappper so the image doesn t make the content unreadable*/
margin: auto;
}
</style>
</head>
<body>
<div id="backimage"></div>
<div id="wrapper" style="width: 700px">
<div id="cbp-fbscroller" class="cbp-fbscroller">
<section id="fbsection1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut massa ac mauris dictum porttitor quis in libero. Etiam orci nulla, placerat eget sagittis ut, porta a dolor. Duis ac lacinia libero. Integer fermentum erat eget urna mollis tristique. Mauris et sapien leo. Suspendisse et lorem eget massa consectetur elementum eu ac neque. Nunc eu nisl tellus. Aliquam erat volutpat. Quisque tristique, arcu sit amet commodo euismod, leo dolor sagittis ante, et fermentum nisi felis eu ipsum. Phasellus id elit lacus. Ut eget nisi non sapien tincidunt tristique eget vel neque. Nullam mi ipsum, blandit eget posuere a, mattis fermentum nunc. In a eros eget dui semper scelerisque a non neque. Curabitur aliquet tempus venenatis. Nam ante turpis, tincidunt at tristique vel, scelerisque ut libero.</p>
</section>
<section id="fbsection2">
<br />
<blockquote class="bigquote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut massa ac mauris dictum porttitor quis in libero. Etiam orci nulla, placerat eget sagittis ut, porta a dolor. Duis ac lacinia libero. Integer fermentum erat eget urna mollis tristique. Mauris et sapien leo. Suspendisse et lorem eget massa consectetur elementum eu ac neque. Nunc eu nisl tellus. Aliquam erat volutpat. Quisque tristique, arcu sit amet commodo euismod, leo dolor sagittis ante, et fermentum nisi felis eu ipsum. Phasellus id elit lacus. Ut eget nisi non sapien tincidunt tristique eget vel neque. Nullam mi ipsum, blandit eget posuere a, mattis fermentum nunc. In a eros eget dui semper scelerisque a non neque. Curabitur aliquet tempus venenatis. Nam ante turpis, tincidunt at tristique vel, scelerisque ut libero.</blockquote>
<br />
</section>
<section id="fbsection3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut massa ac mauris dictum porttitor quis in libero. Etiam orci nulla, placerat eget sagittis ut, porta a dolor. Duis ac lacinia libero. Integer fermentum erat eget urna mollis tristique. Mauris et sapien leo. Suspendisse et lorem eget massa consectetur elementum eu ac neque. Nunc eu nisl tellus. Aliquam erat volutpat. Quisque tristique, arcu sit amet commodo euismod, leo dolor sagittis ante, et fermentum nisi felis eu ipsum. Phasellus id elit lacus. Ut eget nisi non sapien tincidunt tristique eget vel neque. Nullam mi ipsum, blandit eget posuere a, mattis fermentum nunc. In a eros eget dui semper scelerisque a non neque. Curabitur aliquet tempus venenatis. Nam ante turpis, tincidunt at tristique vel, scelerisque ut libero.</p>
</section>
<section id="fbsection4">
<br />
<blockquote class="bigquote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut massa ac mauris dictum porttitor quis in libero. Etiam orci nulla, placerat eget sagittis ut, porta a dolor. Duis ac lacinia libero. Integer fermentum erat eget urna mollis tristique. Mauris et sapien leo. Suspendisse et lorem eget massa consectetur elementum eu ac neque. Nunc eu nisl tellus. Aliquam erat volutpat. Quisque tristique, arcu sit amet commodo euismod, leo dolor sagittis ante, et fermentum nisi felis eu ipsum. Phasellus id elit lacus. Ut eget nisi non sapien tincidunt tristique eget vel neque. Nullam mi ipsum, blandit eget posuere a, mattis fermentum nunc. In a eros eget dui semper scelerisque a non neque. Curabitur aliquet tempus venenatis. Nam ante turpis, tincidunt at tristique vel, scelerisque ut libero.</blockquote>
<br />
</section>
</div>
</div>
</body>
</html>
我希望这能回答你的问题。