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

Question

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

CSS

.hero-image {
position: relative;
width: 100%;
margin-left: 44px;
max-width: 716px;
height: 626px;
background-image: url("/img/hero/hero-bg.jpg");
background-repeat: no-repeat;
background-position: -150px;
background-clip: border-box;
background-size: cover;
border-bottom-right-radius: 140px;
border-top-left-radius: 140px;
}

.hero-image::after {
content: "";
position: absolute;
width: 716px;
height: 626px;
border: 2px solid #b0855b;
box-sizing: border-box;
border-bottom-right-radius: 140px;
border-top-left-radius: 140px;
transform: translate(35px, 33px);
}

Answer 1

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

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

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

Answer 2

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

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

代码片段here.

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

How can i put a border under background image?

html

css

border