CSS：如何将子图像放在父背景图像的前面？

Question

我在CSS的.section类上设置了背景图片。在这方面，我也有不透明性。我的孩子img是透明的png，但是它显示在div的背景图像后面，并且还继承了我在背景图像上的不透明度。我如何才能做到这一点？我尝试使用z-indexes，但无法解决问题。

.section {
  background-size: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url(/image/bg.png);
  background-repeat: no-repeat;
  position: relative;
}
.section:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #000000, #000000);
  opacity: 0.6;
}

.logo {
  width: 100%;
}

<div class="section">
  <img class="logo" src={ "imgafi2x.png"}/>
</div>

Answer 1

只需使用以下代码：

  

注意：我没有添加代码段，因为它是React＆SCSS。堆栈片段不同时支持React和SCSS。这就是我链接到JSBin的原因。

.section {
  background-size: 100%;
  background-color: rgba(0,0,0,0.5);
  background-image: url(//placehold.it/500?text=BG);
  background-repeat: no-repeat;
  position:relative;
  &:before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom right,#000000,#000000);
    opacity: .6; 
    z-index: 1;
  }
  .logo {
    width: 100%;
    position: relative;                 /* Change Here */
    z-index: 2;                         /* Change Here */
  }
}

预览

小提琴：http://output.jsbin.com/lepahirifa