带有背景图像的Div被另一个带有背景图像的div覆盖

.div1 {
  background-image: url('image1.jpg');
  z-index: 2;
}

.div2 {
  background-image: url('image2.jpg');
  z-index: 1;
}

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

.container {
  position: relative;
}

.div1 {
  background-image: url('image1.jpg');
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.div2 {
  background-image: url('image2.jpg');
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.div1 {
  background-image: url('image1.jpg');
  opacity: 0.5;
}

.div2 {
  background-image: url('image2.jpg');
  opacity: 0.5;
}