在背景圖片之后放置文字（background-size：cover）

Question

我試圖將我的網站標題放置為完整的背景圖片，但仍允許用戶向下滾動到網站的下一部分。 我正在使用主體背景圖片來防止圖片周圍出現任何白色邊框/空白，但是需要在圖片之后（和上方）放置內容。

這是HTML：

<header>
    <h1>Olivia E Thorne</h1>
    <p>Brighton, UK</p>
</header>


</body>
</html>

這是CSS：

body {
    background:url('header.png') #A98436 no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

header{
    position: fixed;
    color: whitesmoke;
    font-family: "Segoe UI";
    font-size: 1em;
    line-height: 50%;
    top: 35%;
    left: 45%;
    z-index: 100;
}

我沒有在圖片上包含標題，因為我最終將對其進行動畫處理，因此它必須能夠位於圖片的頂部。 我還需要防止圖像周圍出現任何白色“框架”（因此將其直接放入HTML中無效）。

Answer 1

<header>
<h1>Olivia E Thorne</h1>
<p>Brighton, UK</p>
</header>
<div class="next"> <p>Some content...</p></div>
</body>
</html>

和CSS：

body {
background:url('header.png') #A98436 no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

header{
position: fixed;
color: whitesmoke;
font-family: "Segoe UI";
font-size: 1em;
line-height: 50%;
top: 35%;
left: 45%;
z-index: 100;
} 
.next{
position:relative;
top: 500px; (or 50% or whatever the height of the pic is)
}