可用css radial-gradient实现黑色圆形遮罩：推荐background-image双层叠加法，或img+伪元素法；支持圆心偏移、半径固定及mask-image聚光灯效果。

直接用 CSS 的 radial-gradient 叠加在图片上，就能实现带透明度的黑色圆形遮罩，无需额外标签或 JS。

用 background-image 实现（推荐）

把图片作为容器背景，再用径向渐变叠加一层半透黑圆：

• 给一个 <div> 设置图片为背景，尺寸与图片一致 <li>用 <code>background-image 叠加 radial-gradient()，中心设为黑色，边缘透明
• 调整 rgba(0,0,0,0.6) 控制遮罩深浅，circle at center 确保居中圆形

示例代码：




用 img + 伪元素叠加（兼容老浏览器）

如果必须用 <img> 标签，可用 ::after 伪元素盖一层遮罩：


APIMart
APIMart是一款AI工具，一站式 AI API 平台，多主流模型统一访问。
下载
• 父容器设 position: relative
• img 宽高自适应，不设定位
• 伪元素绝对定位覆盖全图，用 radial-gradient 做圆形遮罩
• 注意设置 content: '' 和 z-index

关键样式：

.container { position: relative; display: inline-block; }
.container img { display: block; }
.container::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at center, rgba(0,0,0,0.5) 0%, transparent 75%);
}

微调遮罩大小和位置

圆形遮罩不一定非要铺满整图，可通过渐变参数灵活控制：

• radial-gradient(circle at 50% 40%, ...)：把圆心移到垂直方向偏上
• radial-gradient(circle 120px at center, ...)：固定半径为 120px，不随容器缩放
• 两个颜色停止点之间距离越小，边缘过渡越锐利；拉大则更柔和

替代方案：CSS mask-image（现代浏览器）

如果需要更精确的圆形裁切+遮罩效果，可用 mask-image 配合 radial-gradient：

• 只在支持 mask-image 的浏览器生效（Chrome/Firefox/Safari 15.4+）
• 先用 radial-gradient(white, transparent) 做圆形蒙版，再叠加黑色遮罩层
• 适合做「聚光灯」式局部高亮效果

简单示例：

img {
  mask-image: radial-gradient(circle at center, white 60%, transparent 65%);
  background: rgba(0,0,0,0.4);
}