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

我正试图在背景图像和内容之间添加一个半透明层。但任何“如何”层都没有显示。我使用了z索引，但不起作用。这里有什么解决方案吗？或者我需要对背景图像和背景颜色进行绝对定位

如果我使用z-index:-1，它在所有后面。如果我使用1，我在所有前面

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

---

您需要将

位置：相对
添加到父
div
和内容
div
。试试这个CSS代码

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

.content {
  padding: 70px 130px;
  position: relative;
}

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

您只需使用
线性渐变
作为图像上的第二个背景：


.bg{
背景：
线性梯度（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’）中心/盖不重复；
高度：200px；
}
.内容{
填充：70px 130px
}

你好
这可以通过更少的元素和使用伪内容的简化结构来实现


注意：属性
内容：“”
仅与
：before
和
：after
伪选择器一起使用
.bg {
  background: url('http://support.kaziwood.com/wp-content/uploads/2018/06/member-1.png') no-repeat;
  height: 200px;
  position: relative;
}

.content {
  padding: 70px 130px;
  position: relative;
}

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

<div>
  <h2>Hello, there</h2>
</div>

/* main container */
div {
  background: url('my-pic.png') center/cover;
  height:200px;
  width: 400px;
  position: relative;
  text-align: center; 
  padding-top: 3em;
  box-sizing: border-box;
}

/* pseudo content for overlay */
div::before{
  content:'';
  background:#000;
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  left:0;
  top:0;
  opacity:.3;
}

/* content - make sure it sits above overlay */
div > * { position: relative; z-index: 1; }
div h2 { color: white; }