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