如何在背景图像下放置边框？

Question

我有一个背景图片和一个边框，所以我需要将该边框放在我的背景图片下方，就像它在草稿中显示的那样。 Draft image
现在我有这样的东西。 My result
我该如何解决？

CSS

.hero-image {
位置：相对;
宽度：100%；
左边距：44px;
最大宽度：716px；
高度：626 像素；
背景图片: url("/img/hero/hero-bg.jpg");
背景重复：不重复；
背景位置：-150px;
背景剪辑：边框框；
背景尺寸：封面；
边框右下角半径：140px;
边框左上角半径：140px;
}

.hero-image::after {
内容：“”；
位置：绝对;
宽度：716px;
高度：626 像素；
边框：2px 实心 #b0855b;
框大小：边框框；
边框右下角半径：140px;
边框左上角半径：140px;
变换：翻译（35px，33px）；
}

Answer 1

在 :after 选择器中添加 z-index。

.hero-image::after {
   ...
   z-index: -1;
}

代码 sn-p here.

Answer 2

尝试使用“z-index”属性。 指示定位元素及其后代的顺序。 示例：

.hero-image { z-index: 1; }

.hero-image-2 { z-index: 0; }