css - 如何使用css设置图像后面的背景图像

Question

我正在尝试将 svg 格式的背景图像设置在 png 格式的图像后面。云图像是我想放在实际图像后面的第一张图像。我想在实际图像后面安装云图像。我如何使用 css 做到这一点？

我得到的结果如图所示

这是一个预期的输出结果图片

.automata-cloud {
  background-image: url('../../../assets/images/cloud_001.svg');
  background-size: cover;
  background-position: no-repeat;
  z-index: -1;
  height: 100%;
}

.automated_intelligence {
  padding: 0 0 80px;
  z-index: 999;
}

<div class="col-xl-7 col-md-6 col-xs-12 banner-image">
  <img class="automated_intelligence_img automata-cloud" src="assets/images/homepage_ban.png">
</div>

Answer 1

您需要将背景图像放到 div 而不是图像本身。而是做这样的事情。

.banner-image{
  background-image: url('../../../assets/images/cloud_001.svg');
  background-size: cover;
  background-position: no-repeat; 
  z-index: -1;
  height: 100%;
}
.automated_intelligence_img{
  padding: 0 0 80px;
  z-index: 999;
}