0

我有一个包含子 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>
4

1 回答 1

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>

我希望这回答了你的问题。

于 2014-10-28T00:23:15.430 回答