如何在一个div中制作图像，以达到整个页面

Question

>我在 css 中遇到了问题。在我的页面中，我想将背景图像添加到通过更改其宽度(宽度不必是完整的(拉伸到全高的页面。我通过背景标签轻松计数，但问题是我想给图像赋予不透明度，所以我需要有两个div，一个带有图像，另一个带有内容并更改位置。但是当我这样做时，图像只有视口的高度，但我希望它等于整页。

谁能帮帮我。

任何帮助将不胜感激。

谢谢。

html {
min-height: 100%;
position: relative;
}
body,
#back-img,
#content {
margin: 0;
padding: 0;
height: 100%
}
#back-img {
background: url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg);
position: absolute;
display: block;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
#content {
aheight: 1000px;
position: absolute;
}

<div id="content">
<h1>Title</h1>
<h2 style="font-size:50px">MORE</h2>
</div>
<div id="back-img"></div>

Answer 1

我不确定这是否是你的问题，但你已经在你的身体上设置了一个 100% 的高度，这需要是一个最小高度。 然后我会使身体相对，然后使用右侧和底部而不是宽度和高度，同时使您的背景尺寸覆盖：

html,
body {
margin: 0;
padding: 0;
min-height: 100vh;   /* use min-height */
position: relative;  /* move relative here */
}
#back-img {
background: url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg) top left no-repeat;
background-size: cover;   /* add this */
position: absolute;
top: 0;
left: 0;
bottom:0;                 /* use bottom and right instead of height and width */
right:0;
z-index: -1;
}
#content {
padding: 1px;       /* stop margins collapsing */
height: 1000px;    /* for test and remove absolute positioning */
}

<div id="content">
<h1>Title</h1>
<h2 style="font-size:50px">MORE</h2>
</div>
<div id="back-img"></div>

Answer 2

使用背景图像为元素添加固定位置，并为内容添加相对位置：

.content {
position relative;
z-index:2;
}
#back-img {
background : url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg);
background-position: cover;
position:fixed; 
right:0;
bottom: 0;
top:0; 
left:0; 
z-index:1; 
}

Answer 3

body, html {
min-height: 100%;
position: relative;
margin: 0;
padding: 0;
}
#back-img {
background: url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg);
opacity: 0.5;
background-size: cover;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#content {
height: 1000px;
}

<div id="content">
<h1>Title</h1>
<h2 style="font-size:50px">MORE</h2>
</div>
<div id="back-img"></div>

Answer 4

用于图像：background-size: cover;