href 不适用于具有 ：after content："的图像;

Question

我试图在点击我的图片后加载一个链接，我对内容为"的图像使用了后期效果；从而防止CCD_ 1打开href调用内部图像：

/* overlay for img */
#masks .mask-img:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .65;
/*give the img dark look after relative position^ */
}

<div class="mask-img">
<a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/face-masks-1612827017.jpg?crop=0.503xw:1.00xh;0.238xw,0&resize=640:*" target="_blank">
<img src="/image/maskKN95.png" alt="n95">
</a>
</div>

Answer 1

由于覆盖层覆盖了链接，您将无法单击该链接。如果您将pointer-events:none添加到覆盖中，您应该能够点击它：

/* overlay for img */
.mask-img {
position: relative;
}
.mask-img:after {
content: '';
display:block;
pointer-events:none;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .65;
/*give the img dark look after relative position^ */
}

<div class="mask-img">
<a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/face-masks-1612827017.jpg?crop=0.503xw:1.00xh;0.238xw,0&resize=640:*" target="_blank">
<img src="/image/maskKN95.png" alt="n95">
</a>
</div>