Question

我有一个带有绝对位置叠加的容器元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

问题是这样做，我必须为内容制作一个div并且绝对定位它。这导致容器没有达到它的全部高度。因此，容器应该采用内容的高度，内容不应该在内容上有0.5绿色覆盖。

有谁知道如何解决这个问题？

Answer 1

您可以将伪元素:after用于叠加层。不需要为此使用额外的div。同时使用z-index值来显示叠加上方的内容。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以将ApiServiceImpl元素定位为相对，然后将其设置的z-index值高于.content的z-index值，默认设置为auto或0：

.overlay

.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%;
}

.content {
  position: relative;
  z-index: 1;
  color: white;
}

如何通过叠加使容器占据内容的全高？

2 个答案: