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

问题根源 #

按照浏览器默认的CSS层叠规则，绝对定位的伪元素在未设置z-index时，层级为auto，渲染优先级会高于父元素自身的背景图层，因此边框会直接盖在背景图上方。
如果不做前置处理就直接给伪元素设置z-index: -1，由于父元素没有创建独立的层叠上下文，伪元素会直接穿透到整个页面的最底层，被页面上其他所有元素遮挡，反而达不到预期效果。

修正方案 #

完成两处核心调整即可实现设计效果，顺带优化响应式适配：

• 给.hero-image添加z-index: 0，通过position: relative + z-index非auto值的组合让父元素生成独立层叠上下文，把内部伪元素的层叠范围约束在父元素边界内，避免负层级元素逃逸到页面底层
• 给.hero-image::after添加z-index: -1，让伪元素在父元素的层叠上下文内部，层级低于父元素自身的背景图渲染层，自然实现边框在背景图下层的叠放效果
• 把伪元素写死的固定宽高替换为inset: 0，让伪元素始终和父元素尺寸保持一致，避免在移动端父元素宽度收缩时出现固定宽度溢出的问题

修正后代码 #

.hero-image {
  position: relative;
  width: 100%;
  margin-left: 44px;
  max-width: 716px;
  height: 626px;
  z-index: 0; /* 创建独立层叠上下文 */
  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;
  inset: 0; /* 撑满父元素，替代固定宽高适配响应式 */
  border: 2px solid #b0855b;
  box-sizing: border-box;
  border-bottom-right-radius: 140px;
  border-top-left-radius: 140px;
  transform: translate(35px, 33px);
  z-index: -1; /* 层级压到父元素背景下层 */
}

内容的提问来源于stack exchange，提问作者n3kk3ll