a href 不适用于带有 :after content:''" 的图像；答案

【问题标题】：a href doesnt work on image with :after content:''";a href 不适用于带有 :after content:''" 的图像；
【发布时间】：2021-04-14 17:09:23
【问题描述】：

点击我的图片后，我正在尝试加载链接，我对带有内容的图像使用了后效：''; 这可以防止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>

【问题讨论】：

尝试添加属性display:block;
你正在用你的覆盖覆盖链接，添加pointer-events:none然后你应该可以点击它
@Pete 在答案中添加您的解决方案，谢谢
@Pete 干得好！！！社区感谢你:)

标签： html css

【解决方案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>

【讨论】：