html - 如何使容器覆盖内容的全高？

Question

我有一个带有绝对定位端覆盖层的容器元素。

.container {
  position: relative;
  background-image: url("https://placeimg.com/1000/1000/any");
  background-size: cover;
  background-position: 50%;
  min-height: 50vh;
  width: : 100%;
}

.overlay {
  position: absolute;
  background-color: green;
  top: 0;
  left: 0;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}

<div class='container'>
  <div class='content'>
  </div>
  <div class='overlay'>
  </div>
</div>

我需要这个绝对定位的div，因为我需要一个绿色透明的叠加效果。

在容器内，我有内容。内容应不含 0.5 绿色透明度并按原样显示颜色。

问题是要做到这一点，我必须为内容制作一个 div 并绝对定位它。这会导致容器无法占据其内容的全部高度。因此，容器应采用内容的高度，并且内容不应在内容上覆盖 0.5 的绿色。

有人知道怎么解决吗？

Answer 1

您可以使用伪元素 :after 进行叠加。无需为此使用额外的 div。还可以使用 z-index 值来在叠加层上方显示其中的内容。

.container {
  position: relative;
  background-image: url("https://placeimg.com/1000/1000/any");
  background-size: cover;
  background-position: 50%;
  width: : 100%;
  padding: 30px 0;
  z-index: 0;
}

.container h1 {
  color: #fff;
}

.container:after {
  content: "";
  position: absolute;
  background-color: green;
  top: 0;
  left: 0;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<div class='container'>
  <h1>foobar</h1>
</div>