如何在背景图像后面放置<img/>

Question

我正在尝试创建类似下图的内容。上下图像是2个背景图像。中间的照片是<img>。问题是我似乎无法找出如何将<img>放在背景图片后面。我尝试了z-index，但这似乎不起作用。我的代码如下：

/*first bg image*/
.detail-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(./assets/img/bg-beige-sm-detail_1.svg);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 99;
  padding-bottom: 3rem;
}
/* the <img> */
.detail-omslagfoto {
  z-index: -99;
}

/*second bg image*/
.volgende-voorstelling {
  background-image: url(./assets/img/bg-next-up-sm.svg);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 4rem 0;
  margin-top: -10rem;
  z-index: 99;
}

<article class="detail-act">some content</article>
<img class="detail-omslagfoto" src="...">
<article class="volgende voorstelling">some content</article>

Answer 1

您需要将position:relative属性添加到.detail-omslagfoto类中。

.detail-omslagfoto {
     z-index: -99;
     position: relative;
 }