CSS：从背景覆盖中排除文本答案

【问题标题】：CSS: Exclude text from background overlayCSS：从背景覆盖中排除文本
【发布时间】：2016-01-07 15:22:55
【问题描述】：

我有一张大图片，我的网页前面有一个黑色的叠加层。我想在叠加层顶部添加一个充满明亮文本的 div。

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

HTML：

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

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

【问题讨论】：

怎么样：z-index: 2;？
那个好像没有效果
真正的问题是什么？ -- jsfiddle.net/abhitalks/7d11esdt
您还需要设置background-color。
您的描述和要求不清楚...也许您可以向我们提供您正在尝试做的事情的图片？

标签： html css

【解决方案1】：

类似这样的：

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

假设这就是你想要的。

【讨论】：

'intro' 中的所有文本都是白色的。但是，叠加层在文本和图像上形成了阴影，我只希望它对图像产生阴影。 z-index 无效。
您所包含的任何内容都没有表明这一点。我的读心能力很差。
我认为我的问题已经足够清楚了——猜猜不够清楚！对于那个很抱歉。我试图完全按照@Abhitalks 在此处发布的操作：jsfiddle.net/abhitalks/7d11esdt

【解决方案2】：

使用伪元素代替覆盖元素。

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

您还需要为 intro 元素显式指定 position 属性才能与内容交互：

.intro {
  position: relative;
}

参见示例here

【讨论】：