Question

当我向下滚动页面时，我有一个固定的标题，我想要保留在容器div后面。正如http://www.madebydaryl.co.uk/所见。除了内容div的背景似乎隐藏在标题的背景之后，它才有意义。不知道如何解决这个问题。

我的css：

header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;  
display: table;
width: 100%;
z-index: 1;
top:0;
left:0;
}

.container {
position: relative;
margin-top:100vh;
background: #fff;
z-index: 2;
}

编辑：这有点工作：

header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
min-height: 100%;
width: 100%;    
display: table;
top:0;
left:0;
}

.container {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
margin-top:100vh;
background: #fff;
}

除了容器div的背景不会拉伸以覆盖所有内容，只是视口的高度。有什么想法吗？

Answer 1

你所说的效果被称为视差滑动效果，在这里查看

http://stephband.info/jparallax/

或

http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellar-js--webdesign-7307

Answer 2

唉，这么简单的解决方案。只需在容器div中放入另一个div，并给它背景颜色。这样：

<header>content</header>
<div class="container>
<div class="bg">
Main content
</div>
</div>

和相同的css除了将背景移动到.bg。

div背景不适用于z-index

2 个答案: