如何用纯CSS实现内部带透明圆形的图片效果？

你可以通过**径向渐变（radial-gradient）或CSS遮罩（mask）**来实现目标效果，下面是修正后的完整方案：

问题分析 #

你现有代码的问题在于：

• background-image声明末尾缺少分号，导致后续样式失效
• ::after伪元素设置了全屏圆形背景，无法实现“中间圆形保留原图、周围半透明遮罩”的效果
• 缺少hover交互的过渡逻辑

解决方案1：径向渐变实现（兼容性好） #

通过径向渐变直接创建带圆形镂空的遮罩层，配合hover动画实现效果：

.imageDiv {
  background-image:url('https://picsum.photos/id/64/4326/2884');
  width: 160px;
  height: 135px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-position: center;
  background-size: cover;
  margin-left: auto;
  position: relative;
  cursor: pointer;
}

/* 带圆形镂空的遮罩层 */
.imageDiv::after {
  position: absolute;
  inset: 0; /* 等价于top/right/bottom/left:0，铺满容器 */
  border-radius: inherit; /* 继承父元素圆角 */
  /* 径向渐变：中心透明区域，向外过渡到半透明白色 */
  background: radial-gradient(circle, transparent 30%, #ffffff61 30%);
  content: "";
  opacity: 0; /* 默认隐藏遮罩 */
  transition: opacity 0.3s ease; /* 平滑过渡动画 */
}

/* hover时显示遮罩 */
.imageDiv:hover::after {
  opacity: 1;
}

/* 确保文字在遮罩上方 */
.imageText {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.imageDiv:hover .imageText {
  opacity: 1;
}

<div class="imageDiv">
  <label class="imageText">
      Cambiar photo
  </label>
</div>

解决方案2：CSS遮罩实现（效果更精准） #

如果不需要兼容旧版浏览器，用mask属性可以更直观地实现镂空效果：

.imageDiv::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: #ffffff61;
  content: "";
  opacity: 0;
  transition: opacity 0.3s ease;
  /* 遮罩：中间圆形透明，其余区域显示背景色 */
  mask: radial-gradient(circle, transparent 30%, black 30%);
  -webkit-mask: radial-gradient(circle, transparent 30%, black 30%);
}

效果说明 #

• hover时容器会显示半透明遮罩，中间圆形区域保留原图清晰度
• 文字会随遮罩同步淡入，提升交互体验
• 通过调整径向渐变的30%数值，可以修改中间圆形的大小

内容的提问来源于stack exchange，提问作者Benjoe Carandang