在图像背景上叠加css [英] CSS overlay over image background

问题描述

我希望在图像背景上覆盖一层，以便更清楚地看到图像上方的白色文本。

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。

推荐答案

我很高兴您已经了解了第二种解决方案；这往往是我通常使用的方法(尽管不是出于任何特殊原因)。您只需对原有方法进行如下修改即可达到预期效果：

#myDiv > p {
  position: relative;
}

也就是说，给嵌套的<p>标记一个非static位置值。查看此处：CodePen

这篇关于在图像背景上叠加css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！