Question

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

我试图在#wrapper中简单地将一些底部填充应用到p标签，但是在查看检查工具时它似乎只是溢出它。我不太明白为什么主要的#wrapper div不会增长。我设置了一个200px的最小高度。我确信这件事非常简单，我在这里失踪了。感谢任何帮助，这是我的标记。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

将内容添加到#wrapper时，

.bg-overlay不会增长，因为它是绝对定位的。这意味着它从正常的文档流程中取出并且不占用空间。就#wrapper而言，它是空的，没有任何高度。

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

position: relative;上的{p {1}}和z-index: 5;会将其提升到伪元素之上，因此它也不会位于叠加下。

＆＃13;

#content-wrap

＆＃13;

#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;
}

＆＃13;

Answer 2

问题在于，>>> old = [('ver','1121'),('sign','89'),('address','A45'),('type','00')] >>> new = [('ver','1121'),('sign','89'),('type','01')] >>> print('no longer there:', set(old) - set(new)) no longer there: {('type', '00'), ('address', 'A45')} >>> print('newly added:', set(new) - set(old)) newly added: {('type', '01')} >>> print('still there:', set(old) & set(new)) still there: {('sign', '89'), ('ver', '1121')}位于absolute内的所有内容都已存在，而且绝对元素超出了容器不会增长的原因。

关闭叠加 div的标记，然后设置div更高的content-wrap

＆＃13;

z-index

＆＃13;

#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;
}

＆＃13;

Answer 3

你的p标签位于bg-overlay div（绝对位置）内，不在#wrapper区域内。

Answer 4

尝试使用这个CSS，它应该可以工作，如果你写了一些文字，那个框就会增长;）

＆＃13;

  #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;
}

＆＃13;

div

4 个答案: