如何将 <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 class。

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

如何将 <img> 放在背景图片后面

How to put an <img> behind a background-image

html

css

image

z-index

background-image