CSS背景图片叠加

Question

我想知道。如何在网页上向下滚动页面时使用它，其背景类型如下。示例在这里，https://alexcican.com/post/455k-users/。我希望网页的顶部能够发生，任何人都可以将我指向正确的方向？s

Answer 1

熟悉位置（相对，绝对和固定）。这是主要元素，但是，这也触发了其他属性，您需要注意。例如，当你进行任何硬定位时，例如固定，你会失去宽度和高度。所以，下面的项目必须纠正这个高度。为了正确地做到这一点，没有任何毛病，请考虑内容的边际至100％。这将弥补艰难的定位。你在处理硬定位时应该考虑的其他事情是你的z索引。由于固定位置将自然地将元素放置在文档的顶部。为了隐藏它，你应该把它放下一两层（如有必要）。

执行以下操作：

<div class="wrapper-parallax"> 
    <div class="parallax"> 
    <h1>Header</h1> 
    </div> 

    <section class="content"> 
    <h1>Content</h1> 
    </section> 
</div> 

CSS：

body { 
    padding: 0; 
    margin: 0; 
} 

.parallax { 
    width: 100%; 
    height: 450px; 
    background: url(http://all4desktop.com/data_images/original/4238051-background.jpg) center center fixed; 
    background-size: cover; 
    top: 0; 
    position: fixed; 
    z-index: -1; 
} 

.content { 
    height: 100%; 
    min-height: 1000px; 
    background: #ededed; 
    position: relative; 
} 

.wrapper-parallax { 
    margin-top: 100%; 
} 

h1 { 
    margin: 50px auto; 
    text-transform: uppercase; 
    text-align: center; 
    font-family: Helvetica; 
    font-size: 150px; 
    color: #9A1414; 
} 

.content h1 { 
    line-height: 500px; 
    color: #999; 
} 

看看它的工作here