如何纠正 img:after 边框和 img 边框的错误 [英] how can I correct the error of the img:after border and the img border

问题描述

#about .col-left .img{宽度:100%；高度:100%；位置:相对；边框:10px纯黑色；z-索引:0；

}

#about .col-left .img::after{内容:《》；位置:绝对；左:-33px；顶部:19px；高度:98%；宽度:98%；边框:7px纯黄色；z-索引:-1；

}

#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;

}

image of the error being displayed

how can I make the white border be displayed above the yellow border at their meeting point?

解决方案

First of all you can't add :after for img tag. That's why you have to wrap img tag with a div. Then add :after with this div.

You can try-

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

Then add 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;
}

Then you can find your result

这篇关于如何纠正 img:after 边框和 img 边框的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！