如何使一个div中的图像拉伸到整个页面答案

【问题标题】：how to make image in one div streach to whole page如何使一个div中的图像拉伸到整个页面
【发布时间】：2018-11-04 18:45:11
【问题描述】：

我的 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>

【问题讨论】：

你能提供你的css文件内容吗？
请您澄清您的问题并使用您当前的代码创建一个minimal reproducible example。目前尚不清楚您当前的问题或期望的结果是什么 - 例如视口高度，但我希望它等于整页是整页而不是视口的高度吗？似乎没有足够的内容让它比视口大
@tangoal 我刚刚更新了问题。

标签： html reactjs css styles

【解决方案1】：

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

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

}

【讨论】：

【解决方案2】：

我不确定这是否是您的问题，但您已在身体上设置了 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>

【讨论】：

不客气。请接受答案，以便其他人知道问题已解决（点击答案左上角的勾号）

【解决方案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>

【讨论】：

【解决方案4】：

用于您的图像： background-size: cover;

【讨论】：