如何实现面包屑导航中背景图覆盖内部图片

我想让面包屑里的背景框架图盖在内部图片上面，试了给图片设z-index: -1，结果直接看不到图片了。下面是相关代码和效果截图，求解决办法：

原CSS代码 #

.breadcrumb {
    margin-bottom: 25px;
    margin-top: 0px;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    font-weight: bold !important;
    text-align: center !important;
    background-color: #ffffff;
}

.breadcrumb li {
  width: 181px;
  height: 140px;
  text-align: center !important;
  color: white !important;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-left: -30px;

}

.breadcrumb li:nth-child(1),.breadcrumb li:nth-child(2),.breadcrumb li:nth-child(3),.breadcrumb li:nth-child(4),.breadcrumb li:nth-child(5),.breadcrumb li:nth-child(6),.breadcrumb li:nth-child(7),.breadcrumb li:nth-child(8),.breadcrumb li:nth-child(9) {
  background:  url(asset-path("light_gray.png")) no-repeat right !important;
  background-size: cover !important;
  z-index: 1;
}
.breadcrumb a, .breadcrumb a:link,.breadcrumb a:visited {
    color: white;
    margin: 10px 0px 115px 30px;
    font-size: 13px;
    white-space: nowrap;
}
.breadcrumb li img {
  width: 131px;
    position: absolute;
    left: 19%;
    top: 22%;
    height: 100%;
    clip-path: polygon(0% 0%, 0% 0%, 81% 0%, 108% 26%, 40% 100%, 0% 81%, 0% 0%, 0% 0%);
    }

col-md-12{
  border: 2px solid black;
  padding: 10px;
  margin: -10px;
}
strong{
  text-transform: uppercase;
}
.doctor{
  padding: 0px;
}
.patient{
  padding: 0px
}

.breadcrumb > li + li:before {
    content: "  " !important;

}

.border{
  width: 100%
}

li .shadow, li .blue, li .orange, li .gray,  li .green {
  color: white !important;
}
}
 .left{
  border-left-color: #fe4e2d !important;
 }

原HTML代码 #

<ul class="breadcrumb">
            <li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=1">Conception</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=1"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/739/original/5EDAD5D1-E621-4DAF-BB33-C17554246FDA.jpeg?1679639265" alt="5edad5d1 e621 4daf bb33 c17554246fda">
    </a>            </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=2">Jig/BB/CT</a>
                </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=3">Pour/Mount</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=3"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/783/original/image.jpg?1681598393" alt="Image">
    </a>            </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=4">Teeth set up</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=4"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/784/original/image.jpg?1681598836" alt="Image">
    </a>            </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=10">Bar milling</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=10"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/781/original/image.jpg?1681512121" alt="Image">
    </a>            </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=11">Finalization</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=11"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/816/original/CB1E55D8-9D9E-42F3-96EA-3C4486D9FCEF.jpeg?1682993428" alt="Cb1e55d8 9d9e 42f3 96ea 3c4486d9fcef">
    </a>            </li><li style="background: url(/assets/gray.png) no-repeat right !important; background-size: cover !important;"> <a class="gray " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=13">Shipped </a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=13"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/817/original/455D15CB-9C78-40B7-A3D6-9E710565CCC4.jpeg?1682993522" alt="455d15cb 9c78 40b7 a3d6 9e710565ccc4">
    </a>    </li></ul>

解决办法 #

问题核心：给图片设z-index: -1后，图片会跑到父元素.breadcrumb li的下层，父元素的背景（哪怕透明）会直接遮挡它。换用伪元素实现背景框架，就能灵活控制层级：

1. 移除.breadcrumb li本身的背景设置，改用伪元素:after生成背景框架
2. 给伪元素设置更高的z-index，让它盖在图片上面
3. 确保文字链接的层级最高，不被遮挡

修改后的关键CSS代码：

/* 移除原li的背景设置 */
.breadcrumb li:nth-child(1),
.breadcrumb li:nth-child(2),
.breadcrumb li:nth-child(3),
.breadcrumb li:nth-child(4),
.breadcrumb li:nth-child(5),
.breadcrumb li:nth-child(6),
.breadcrumb li:nth-child(7),
.breadcrumb li:nth-child(8),
.breadcrumb li:nth-child(9) {
  background: none !important;
}

/* 给li添加伪元素作为背景框架 */
.breadcrumb li:nth-child(1):after,
.breadcrumb li:nth-child(2):after,
.breadcrumb li:nth-child(3):after,
.breadcrumb li:nth-child(4):after,
.breadcrumb li:nth-child(5):after,
.breadcrumb li:nth-child(6):after,
.breadcrumb li:nth-child(7):after,
.breadcrumb li:nth-child(8):after,
.breadcrumb li:nth-child(9):after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(asset-path("light_gray.png")) no-repeat right !important;
  background-size: cover !important;
  z-index: 2; /* 层级高于内部图片 */
}

/* 处理最后一个li的自定义灰色背景 */
.breadcrumb li[style*="gray.png"]:after {
  background: url(/assets/gray.png) no-repeat right !important;
  background-size: cover !important;
}

/* 保证文字不被遮挡 */
.breadcrumb a {
  position: relative;
  z-index: 3;
}

/* 图片层级设为1，低于伪元素 */
.breadcrumb li img {
  width: 131px;
  position: absolute;
  left: 19%;
  top: 22%;
  height: 100%;
  clip-path: polygon(0% 0%, 0% 0%, 81% 0%, 108% 26%, 40% 100%, 0% 81%, 0% 0%, 0% 0%);
  z-index: 1;
}

这样修改后，背景框架会稳稳盖在图片上面，文字也能正常显示，不会出现图片消失的问题。

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