如何在堆叠图层中挖洞，复现黄色按钮下方带透明孔洞的UI效果

云原生阿岚

2026-10-1

实现方案

方案1：CSS mask 遮罩（推荐，适配绝大多数场景）

原理是给毛玻璃层添加遮罩，把需要做孔洞的位置设为完全透明，无需额外切图，用CSS渐变即可生成遮罩：

.glass-panel {
  /* 你的原有毛玻璃样式 */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  /* 核心挖洞代码 */
  mask: radial-gradient(circle 20px at 90px 45px, transparent 100%, #000 100%);
  -webkit-mask: radial-gradient(circle 20px at 90px 45px, transparent 100%, #000 100%);
}

参数说明：

circle 20px 是孔洞的半径，根据你的按钮尺寸调整即可
at 90px 45px 是孔洞在毛玻璃层内的坐标，对应黄色按钮的位置
需要多个孔洞时，用逗号分隔多个radial-gradient参数即可

方案2：伪元素模拟（兼容低版本浏览器）

适合页面背景固定、没有动态变化的场景，不需要用到mask属性，兼容性更好：

.glass-panel {
  position: relative;
  /* 你的原有毛玻璃样式 */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.glass-panel::before {
  content: "";
  position: absolute;
  /* 对应孔洞的位置和尺寸 */
  left: 70px;
  top: 25px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 背景设置和页面底层背景完全一致 */
  background: inherit;
  /* 移除毛玻璃效果，模拟透过去的视觉 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}