在背景圖片下方顯示內容

-1

在我的主頁上我有一個完整寬度的背景圖片，但是，我的內容不會顯示在其下方。相反，它顯示在背景圖像的頂部。任何人都可以幫助我將我的內容顯示在我的背景圖片下方嗎在背景圖片下方顯示內容

這是我的html代碼：

<html> 
 
<title>PLR.com Home</title> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<style> 
 

 
.homepage-backgroundimage { 
 
\t z-index: -1; 
 
\t position: absolute; 
 
\t background-size: cover; 
 
\t left:0; right:0; top:0; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t display: block; 
 
\t } 
 

 
.flexcontainer-bodyarea { 
 
\t display: -webkit-flex; 
 
\t display: flex; 
 
\t -webkit-flex-wrap: wrap; 
 
\t flex-wrap: wrap; 
 
\t width: 1000px; 
 
\t height: 500px; 
 
\t background-color: #bbb; 
 
\t } 
 
.flexitem-50ptextarea { 
 
\t width: 480px; 
 
\t height: 200px; 
 
\t margin: 10px; 
 
\t background-color: #fff; 
 
\t } 
 
    
 
body { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 36px; 
 
    color: #bbb; 
 
    } 
 
</style> 
 

 

 
<body> 
 
<div class="homepage-backgroundimage"><img src="http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg"></div> 
 
<div class="flexcontainer-bodyarea"> 
 
    <div class="flexitem-50ptextarea">This is one text area</div> 
 
    <div class="flexitem-50ptextarea">This is two text area</div> 
 
</div> 
 

 

 
</body> 
 
</html>

來源

2017-09-11 chris_852

不能顯示背景圖片下面的文字，這樣你就無法看到它。雖然你可以把透明背景放到你的div上。 – bhansa

背景容器絕對定位。這可能是導致你的問題。嘗試親戚，然後你將不得不玩我猜猜的背景大小。 –

使其成爲真正背景圖片（在CSS規則，而不是在圖像標記），去除絕對位置爲DIV，並給它100％的高度：

html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.homepage-backgroundimage { 
 
    background: url(http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg) center, center; 
 
    background-size: cover; 
 
    height: 100%; 
 
} 
 

 
.flexcontainer-bodyarea { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    width: 1000px; 
 
    height: 500px; 
 
    background-color: #bbb; 
 
} 
 

 
.flexitem-50ptextarea { 
 
    width: 480px; 
 
    height: 200px; 
 
    margin: 10px; 
 
    background-color: #fff; 
 
} 
 

 
body { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 36px; 
 
    color: #bbb; 
 
}

<div class="homepage-backgroundimage"></div> 
 
<div class="flexcontainer-bodyarea"> 
 
    <div class="flexitem-50ptextarea">This is one text area</div> 
 
    <div class="flexitem-50ptextarea">This is two text area</div> 
 
</div>

來源

2017-09-11 17:37:59 Johannes

這段代碼似乎在這裏完美工作，但是當我把它放到我的網站上時，它並沒有。這導致我相信我的其他一些代碼必須存在問題。 –

您是否在我的代碼示例中顯示了爲'html'和'body'添加了100％高度？另外，如果*'body'和'.homepage-backgroundimage'（即'.homepage-backgroundimage'的父元素）之間還有任何其他元素*，則這些也需要100％的「高度」定義才能起作用。 – Johannes

是的，我已經將高度添加到我的代碼中，並且看起來很好...但是，在我的代碼之前，我仍然有

在背景圖片下方顯示內容

回答