html - 如何纠正 img:after 边框和 img 边框的错误

Question

#about .col-left .img{
       width: 100%;
       height: 100%;
       position: relative;
       border: 10px solid black;
       z-index: 0;

}

#about .col-left .img::after{
        content: "";
        position: absolute;
        left: -33px;
        top: 19px;
        height: 98%;
        width: 98%;
        border: 7px solid yellow;
        z-index: -1;

}

正在显示的错误的图像

如何使白色边框在他们的交汇点显示在黄色边框上方？

Answer 1

首先，您不能为 img 标签添加 :after。这就是为什么你必须用 div 包装 img 标签的原因。然后在这个 div 之后添加 :after。

你可以试试-

<div class="imageContainer">
   <img src="image.jpg" alt="">
</div>

然后添加css

.imageContainer{
  position: relative;
}
.imageContainer img {
  width: 100%;
  height: 100%;
  border: 10px solid yellow;
}
.imageContainer :after {
  content: "";
  border: 10px solid black;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 12px;
  left: -13px;
  z-index: -1;
}

然后你可以找到你的结果