我试图在单击我的图像后加载一个链接，我对带有内容的图像使用了后效：''; 这可以防止a href打开调用内部图像的 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>由于您的叠加覆盖了链接，您将无法单击该链接。如果您添加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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句