背景圖像後的位置文本（背景大小：封面）

我試圖將我的網站標題作爲完整的背景圖像，但仍允許用戶向下滾動到網站的下一部分。我正在使用body background-image來防止圖像周圍出現任何白色邊框/邊距，但需要在圖像之後（和之上）放置內容。背景圖像後的位置文本（背景大小：封面）

下面是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中不起作用）。

來源

2016-03-27 OEThorne

卸下背景附件：固定;從你的CSS。這將允許用戶向下滾動圖像。 – andnowchris

嗨，我剛剛這樣做，但仍然無法從圖像中向下滾動，即使在添加理論上應該進一步下降的內容時也是如此。 – OEThorne

所以你將不得不將下一個元素放在標題圖像下面。所以定位：相對;和該元素的「top：」屬性設置爲以下元素的圖像高度。我給你一個代碼的答案。 – andnowchris

<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) 
}

來源

2016-03-27 19:28:01 andnowchris

背景圖像後的位置文本（背景大小：封面）

回答

相關問題