div 上的背景图片高度问题

Question

我有一个应用了背景图像的 div (#wrapper)，div 的第一个子元素是绝对定位的颜色叠加层 div (.bg-覆盖）出于某种原因，每当我有这个 .bg-overlay div 它似乎不允许我的背景图像在放置其他元素时增加高度。

我试图简单地将一些底部填充应用于此 #wrapper 中的 p 标记，但在查看检查工具时它似乎只是溢出了它。我不太明白为什么主要#wrapper div 的高度没有增长。我已经将它的最小高度设置为 200px。我确定我在这里缺少的东西非常简单。感谢任何帮助，这是我的标记。

#wrapper {
   background-image: url("http://placehold.it/350x150");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  min-height: 200px;
}

.bg-overlay {
    background-color: rgba(75, 78, 83, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#content-wrap p {
  padding-bottom: 100px;
}

<section id="wrapper">
  <div class="bg-overlay">
  <div id="content-wrap">
  <h1>
  Heading Heading Heading
  </h1>
  <p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  </div> 
  </div>
</section>

Answer 1

#wrapper 不会随着您向 .bg-overlay 添加内容而增长，因为它是绝对定位的。这意味着它脱离了正常的文档流并且不占用 space。就 #wrapper 而言，它是空的，没有任何高度。

您必须将您的内容移出 .bg-overlay 或不对其使用绝对定位，以便 #wrapper 会在您添加内容时进行调整。您还可以使用伪元素来创建叠加层。这样您就可以稍微简化您的标记。

position: relative; 和 #content-wrap 上的 z-index: 5; 将其提升到伪元素之上，因此它不在叠加层之下。

#wrapper {
  position: relative;
  z-index: 0;
  background-image: url("http://placehold.it/350x150");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

#wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(75, 78, 83, 0.6);
}

#content-wrap {
  position: relative;
  z-index: 5;
}

#content-wrap p {
  color: white;
  padding-bottom: 100px;
}

<section id="wrapper">
  <div id="content-wrap">
  
    <h1>
      Heading Heading Heading
    </h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>

  </div>
</section>

Answer 2

这里的问题是你的所有内容都在 absolute 定位的 div 中并且绝对元素不在流中，这就是你的容器不增长的原因。

关闭 overlay div 的标签并在 content-wrap 上设置更高的 z-index

#wrapper {
  background-image: url("http://placehold.it/350x150");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  min-height: 200px;
}

.bg-overlay {
  background-color: rgba(75, 78, 83, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#content-wrap {
  position: relative;
  z-index: 10;
}

#content-wrap p {
  padding-bottom: 100px;
}

<section id="wrapper">
  <div class="bg-overlay"></div>
  <div id="content-wrap">
    <h1>
      Heading Heading Heading
    </h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
</section>

Answer 3

您的 p 标签在 bg-overlay div（绝对定位）内，而不是在 #wrapper 部分内。

Answer 4

试试这个 CSS，它应该可以工作，如果你写一些文本，框会变大 ;)

  #wrapper {
   background-image: url("http://placehold.it/350x150");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
}

.bg-overlay {
    background-color: rgba(75, 78, 83, 0.6);
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

div 上的背景图片高度问题

Background image height issue on div

html

css

background-image