如何使用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;
}