CSS：如何将子图像带到父背景图像前？

Posted 2023-01-27

我在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>

答案

只需使用以下代码：

注意：我没有添加片段，因为它是React和SCSS。 Stack Snippets不支持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