html - 当 parent 有背景颜色时，图像不显示线性渐变

Question

我有一个带有背景颜色的父 div.parent:白色和一个带有图像的 div。

我在 div.img-container 上设置了线性渐变

我需要的是有一个背景颜色为白色的容器，图像上有一个背景线性渐变。我需要两个“ parent ”。我不知道我错过了什么，当我只有一个 div 时它工作正常..

.parent{
  background-color:grey;
}

.img-container{
  height:200px;
  width:200px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.75) 100%);
margin:auto;
}

.my-img{
  display:block;
  position:relative;
  width:200px;
  height:200px;
  z-index:-1;
}

<div class="parent">
  <div class="img-container">
	  <img class="my-img" src="http://image.noelshack.com/fichiers/2016/05/1454345014-capture-d-ecran-2016-02-01-a-17-43-28.png">
  </div>
</div>

Answer 1

一个简单的解决方案是使用伪元素，而不会混淆 z-index 和主元素/父元素上的绝对定位。

这样它将与其余内容很好地融合。

.parent{
  background-color:grey;
}
.img-container{
  height:200px;
  width:200px;
  margin:auto;
  position: relative;
}
.img-container:after{
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right:0;
  bottom:0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.75) 100%);
}
.my-img{
  display:block;
  width:200px;
  height:200px;
}

<div class="parent">
  <div class="img-container">
    <img class="my-img" src="http://image.noelshack.com/fichiers/2016/05/1454345014-capture-d-ecran-2016-02-01-a-17-43-28.png">
  </div>
</div>