CSS覆盖在图像背景上答案

【问题标题】：CSS overlay over image backgroundCSS覆盖在图像背景上
【发布时间】：2016-11-21 19:21:55
【问题描述】：

我想在我的图像背景上叠加一层，以便更清楚地看到图像上方的白色文本。

为什么this solution 不起作用？

HTML：

<div id="myDiv" class="bg1 image-cover">
  <p>H</p>
</div>

CSS：

#myDiv {
  width: 300px;
  height: 300px;
  color: #fff;
  position: relative;
  font-size:  100px;
  font-weight: bold;
}

.image-cover:before {
    content:'\A';
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:rgba(0,0,0,0.9);
    opacity: 1;
}

.bg1 {
  background-size: cover;
  background:  url('https://2zpt4dwruy922flhqyznip50-wpengine.netdna-ssl.com/wp-content/uploads/2014/12/lock-and-stock-photos.jpg');
}

而this one 这样做：

HTML：

<div id="myDiv" class="bg1">
  <div class="image-cover">
    <p>H</p>
  </div>
</div>

CSS：

...

.image-cover {
    content:'\A';
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:rgba(0,0,0,0.9);
    opacity: 1;
}

...

我想我误解了:before 的工作方式，但我不喜欢第二种解决方案，因为它比第一种解决方案多一个 div。

【问题讨论】：

你可以看到这个[这里][1]stackoverflow.com/questions/28121731/…
我看过这个解决方案，但它似乎需要z-index 两个元素来创建堆叠上下文。由于:before 元素出现在元素“之前”，我希望它堆叠在文本上方或下方。但由于它定位为绝对，它应该出现在文本后面。
@randomDownvoter 为什么？这是一个诚实的问题，并且可能非常令人困惑。 + 1.

标签： css overlay

【解决方案1】：

很高兴您已经知道第二种解决方案；这往往是我通常使用的方法（尽管不是出于任何特定原因）。你可以简单地修改你原来的方法如下并获得想要的效果：

#myDiv > p {
  position: relative;
}

即，给嵌套的<p> 标记一个非static 的位置值。见这里：CodePen

【讨论】：

你是个天才！感谢一千次（但只能投你一次）：D 我应该有一个 CSS 重置，默认情况下将 div 设置为 position: relative :) 这是一个非常容易的错误，这可能来自我对 position: relative 缺乏了解与 DOM 元素的默认定位相比。
很高兴我能帮上忙。你是对的，在这种情况下这是一个很容易修复的错误。出于这个原因，我经常在我的样式表中设置一些顶级样式声明来解决这个问题：div, p { position: relative; }。显然，在很多情况下元素（通常是 <div> 而不是 <p> 元素）需要 absolute 定位，但您也可以创建一个新类来处理这个问题。

【解决方案2】：

您可以像这样增加要覆盖在图像上的文本的z-index：

#myDiv{
    z-index: 1;
}

#myDiv p{
    z-index: 2; /* should be more than the z-index of the background */
}

【讨论】：