Question

我有一个大图像，覆盖在我的网页前面的黑色覆盖层。我想在叠加层顶部添加一个填充明亮文字的div。

有没有办法定位div以便将其从叠加层中排除？

HTML：

＆＃13;

.overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.45);
  top: 70px;
  left: 0px;
  right: 0px;
  bottom: -200px;
  z-index: 1;
}
.about-us {
  background-image: url("img.jpg");
  width: 1100px;
  height: 731px;
  display: block;
  position: relative;
}

＆＃13;

<div class="about-us">
  <div class="overlay">
    <div class="intro">
      <h2>Catchy title</h2>
      <p>Small Para</p>
      <h1>More txt</h1>
    </div>
  </div>
</div>

＆＃13;

Answer 1

这样的事情：

h2 {
    background-color: white;
    z-index: 2;
}

假设这是你想要的。

Answer 2

使用伪元素而不是覆盖元素。

.about-us:before {
      content:"";
      position: absolute;
      background-color: rgba(0,0,0,0.45);
      top: 70px;
      left: 0px;
      right: 0px;
      bottom: -200px;
}

此外，您需要明确指定能够与内容交互的引用元素的position属性：

.intro {
  position: relative;
}

参见示例here

CSS：从背景叠加中排除文本

2 个答案: