CSS 叠加在图像背景上

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

为什么不会这个解决方案 http://codepen.io/anon/pen/aBJErm work ?

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');
}

while this one http://codepen.io/anon/pen/XNMZRp does:

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。

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

#myDiv > p {
  position: relative;
}

即，给嵌套<p>标记一个非static位置值。看这里：CodePen http://codepen.io/IsenrichO/pen/MbpQzJ