html - 内容和背景图像之间的半透明层 - CSS

Question

我正在尝试在背景图像和内容之间添加一个半透明层。但是任何层都没有显示。我使用了 z-index 但没有工作。这里有什么解决方案吗？或者我需要做绝对定位背景图像和背景颜色？

如果我使用 z-index : -1 它落后于所有..如果我使用 1 则我排在所有前面

<div class="bg">
  <div class="mask"></div>
  <div class="content">
    <h2>Hello There</h2>
  </div>
</div>

CSS 代码是

.bg{
  background: url('http://support.kaziwood.com/wp-content/uploads/2018/06/member-1.png') no-repeat;
  height:200px;

}
.content{padding:70px 130px}
.mask{
  background:#000;
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  left:0;
  top:0;
  opacity:0.3;
  z-index:-1;
}

https://jsfiddle.net/2kcx1L2n/

Answer 1

您可以简单地使用 linear-gradient 作为图像的第二个背景:

.bg {
  background: 
  linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
  url('http://support.kaziwood.com/wp-content/uploads/2018/06/member-1.png') center/cover no-repeat;
  height: 200px;
}

.content {
  padding: 70px 130px
}

<div class="bg">
  <div class="content">
    <h2>Hello There</h2>
  </div>
</div>