如何用CSS实现圆形穿透黑透背景显示底层图片？

需求与问题 #

需要实现三层结构（外层容器div、图片、带圆形的上层div）：

• 图片整体添加黑色半透明背景遮罩
• 上层的圆形区域需显示未加遮罩的原图，圆形带白色边框
• 之前尝试用box-shadow实现时出现阴影叠加问题，clip-path无法实现全局黑透背景，尝试代码如下：

尝试的CSS代码 #

.main {
    width: 500px;
    height: 55px;
    position: absolute;
}

.circle-1{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 5000px rgba(0,0,0,.7);
}

.circle-2{
  position: relative;
  left: 150px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 5000px rgba(0,0,0,.7);
}

.circle-3{
  position: relative;
  left: 150px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 5000px rgba(0,0,0,.7);
}

尝试的HTML代码 #

<div class="main">
  <div class="circle-1"></div>
  <div class="circle-2"></div>
  <div class="circle-3"></div>
</div>

正确实现方案 #

使用CSS mask 属性（配合前缀兼容主流浏览器）实现遮罩挖洞，同时用渐变实现白色圆形边框，避免阴影叠加问题。核心思路是：

1. 外层容器设为相对定位，统一管理图片和遮罩层
2. 遮罩层绝对定位覆盖整个图片，背景为黑色半透明
3. 用mask创建多个圆形透明区域，透出下方原图
4. 通过background径向渐变在遮罩层上绘制白色圆形边框

完整代码 #

HTML

<div class="image-container">
  <img src="你的图片地址" alt="示例图片" class="target-image">
  <div class="mask-layer"></div>
</div>

CSS

.image-container {
  position: relative;
  width: 500px;
  height: 55px;
  overflow: hidden; /* 超出容器的内容裁剪 */
}

.target-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例填充容器 */
}

.mask-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 黑色半透明背景 */
  /* 用mask创建三个圆形透明区域，位置对应需求 */
  -webkit-mask: 
    radial-gradient(circle at 25px 27.5px, transparent 25px, black 26px),
    radial-gradient(circle at 175px 27.5px, transparent 25px, black 26px),
    radial-gradient(circle at 325px 27.5px, transparent 25px, black 26px);
  mask: 
    radial-gradient(circle at 25px 27.5px, transparent 25px, black 26px),
    radial-gradient(circle at 175px 27.5px, transparent 25px, black 26px),
    radial-gradient(circle at 325px 27.5px, transparent 25px, black 26px);
  /* 用背景渐变绘制白色圆形边框 */
  background-image: 
    radial-gradient(circle at 25px 27.5px, transparent 23px, white 24px, white 25px, transparent 26px),
    radial-gradient(circle at 175px 27.5px, transparent 23px, white 24px, white 25px, transparent 26px),
    radial-gradient(circle at 325px 27.5px, transparent 23px, white 24px, white 25px, transparent 26px);
}

关键说明 #

• mask 属性：通过径向渐变定义透明区域（transparent部分），遮罩层仅在black区域显示背景黑透效果，透明区域透出下方图片
• 白色边框：利用多层径向渐变，在圆形边缘绘制2px宽的白色边框（white 24px到white 25px），内外用透明填充
• 定位：三个圆形的位置通过at x y参数控制，x坐标分别为25px、175px、325px（对应容器内的位置），y坐标为容器高度的一半27.5px

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