Question

所以我试图模仿这个网站的一些外观：

http://quay.com.au/

因为我对设计很感兴趣。我想知道如何使用Bootstrap在行中重叠容器，因为我查看了代码，看起来这就是他们正在使用的内容。

到目前为止，这就是我对HTML的看法：

<div class="row">
<div class="col-md-5 col-md-offset-2"><div class="about img-rounded">
 <h3>About</h3>
 <p><b>Info1</b></p>
 <p>Info2 </p>
</div></div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-1"></div>
<div class="col-md-3 col-md-offset-2"><div class="projects img-rounded">
 <h3>Projects</h3>
 <img class="img-responsive" src="img">
 <p>Description</p>
 <img class="img-responsive" src="img"> 
 <p>Description</p>
 <img class="img-responsive" src="img">
 <p>Description</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3"><div class="work img-rounded">
 <h3>Work</h3>
</div></div>
</div>
</div>

有什么建议吗？与css中的z-index有关的是我唯一的猜测......

Answer 1

查看网站上的代码，容器有一个位置：relative，并且让截面重叠的部分偏离顶部，如The Query Experience

.page-index .pattern-gray {
    top: -240px;
}

快速启动http://www.bootply.com/Blms3j1GjO

Answer 2

您正在寻找的是 Parallax Scrolling 。有几个教程，在这里的一个答案中很难包含完整的实现。

<强> Here's a good resource from David Walsh on this

基本上，这是background-attachment: fixed和重叠div元素的组合，以及一些javascript在隐藏时翻转所选图像。

我希望有所帮助。

使用行重叠容器？

2 个答案: