Question

在我的主页上，我有一个全宽的背景图片，但是，我的内容不会显示在它下面。相反，它显示在背景图像的顶部。任何人都可以帮助我将我的内容显示在我的背景图像下面吗？

这是我的HTML代码：

＆＃13;

<html>
<title>PLR.com Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.homepage-backgroundimage {
	z-index: -1;
	position: absolute;
	background-size: cover;
	left:0; right:0; top:0;
	margin-left: auto;
	margin-right: auto;
	display: block;
	}

.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;
  }
</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>

＆＃13;

Answer 1

将其设为真正的背景图片（在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>

Answer 2

放position:relative代替position:absolute

以下是代码：

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

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

.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;
  }
</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>

在背景图像下方显示内容

2 个答案: