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