大家好，我试着设计一个非常简单的设计。我希望页面的第一部分具有固定的位置，当我滚动时，页面的其余部分将覆盖它，就像像popcoren这样的网站上的时间是exmple of site that uses that design。好吧，我开始构建一些东西，但它不会工作，因为容器流体bg总是回到后面，不会覆盖固定的内容。 我设法做了什么，但它的丑陋 - 我改变了每个子div（容器 - 流体）的bg颜色，它似乎工作，但正如我所说，我相信这不是正确的答案。
这是我的代码：
<div id="bg_1" style="background-image:url(img/bg_1.png); background-repeat:repeat; background-attachment: fixed;background-size: 100% 100%; width:100%; z-index:-1; ">
<div style=" width:100%; font-family:Alef,sans-serif; color:#FFF;position:fixed; ">
<div class="jumbotron" style= "background-color:transparent; text-align: center; color:#FFF;">
<center> <h1>blah blah</h1> </center>
<center><h2>blah blah blah blah</h2></center>
</div>
</div>
</div>
<div class="container-fluid" style="background-color:#CE1E1A;"><!--icon and animation area -->
<div class="row" >
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-8 col-xs-offset-2">
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A; ">
<img src="img/icons/re_discover.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;" dir="rtl">please help me please help me please help me</span>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
<img src="img/icons/meet_new_pl.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;">please help me</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me</span>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
<img src="img/icons/peek_logo.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me please help me please help me</span>
</div>
</div>
</div>
</br>
<hr />
</div> <!--end of container fluid -->
<div class="container-fluid" style="background-color:#CE1E1A;"><!--icon and animation area -->
<div class="row" >
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-8 col-xs-offset-2">
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A; ">
<img src="img/icons/re_discover.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;" dir="rtl">please help me please help me please help me</span>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
<img src="img/icons/meet_new_pl.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;">please help me</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me</span>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
<img src="img/icons/peek_logo.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me please help me please help me</span>
</div>
</div>
</div>
</br>
<hr />
</div> <!--end of container fluid -->
<div class="container-fluid" style="background-color:#CE1E1A;"><!--icon and animation area -->
<div class="row" >
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-8 col-xs-offset-2">
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A; ">
<img src="img/icons/re_discover.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;" dir="rtl">please help me please help me please help me</span>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
<img src="img/icons/meet_new_pl.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;">please help me</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me</span>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
<img src="img/icons/peek_logo.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
<h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
<span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me please help me please help me</span>
</div>
</div>
</div>
</br>
<hr />
</div> <!--end of container fluid -->
这是一个例子：bootply
答案 0 :(得分：0)
尝试改变：
<div class="container-fluid" style="background-color:#CE1E1A;">
为：
<div class="container-fluid" style="background-color:#CE1E1A;position:relative;">