如何实现毛玻璃模糊背景上的圆形聚光灯高亮未模糊区域效果

问题根源 #

原有实现对整个毛玻璃容器统一添加了模糊滤镜，滤镜效果会作用于容器内部所有元素及背景，即便设置圆形镂空也无法规避模糊的继承影响，因此圆形区域始终保持模糊状态。

方案1：纯CSS实现（无需JS/Canvas，兼容性较好） #

核心思路：两层背景叠加，底层放原始清晰背景，上层放带遮罩的毛玻璃层，通过CSS mask在毛玻璃层挖出圆形透明区域，露出下层清晰背景。

<!-- 页面结构 -->
<div class="container">
  <!-- 原始清晰背景层 -->
  <div class="raw-background"></div>
  <!-- 带挖孔的毛玻璃层 -->
  <div class="frosted-glass"></div>
  <!-- 业务内容层 -->
  <div class="content">你的页面内容</div>
</div>

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.raw-background {
  position: absolute;
  inset: 0;
  background: url(你的背景图资源地址) center/cover no-repeat;
  z-index: 1;
}
.frosted-glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* 毛玻璃效果参数可按需调整 */
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.15);
  /* 遮罩挖孔：circle后三个参数分别为圆心横坐标、纵坐标、高亮圆半径 */
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 100px, #000 100px);
  mask: radial-gradient(circle at 50% 50%, transparent 100px, #000 100px);
}
.content {
  position: relative;
  z-index: 3;
}

如果需要实现可移动的高亮圆，仅需用JS动态修改mask属性中circle at X Y的坐标参数即可。

方案2：Canvas实现方案 #

核心思路：在canvas上绘制两次背景，第一次绘制完整清晰背景，第二次对背景应用模糊后，通过路径裁剪只保留圆形外的模糊区域，圆形区域保留第一次绘制的清晰效果。

<canvas id="bgCanvas"></canvas>

const canvas = document.getElementById('bgCanvas')
const ctx = canvas.getContext('2d')
// 设置canvas尺寸与窗口匹配
canvas.width = window.innerWidth
canvas.height = window.innerHeight

const bgImg = new Image()
bgImg.src = '你的背景图资源地址'
bgImg.onload = () => {
  // 第一步：绘制完整清晰背景
  ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height)
  
  // 第二步：裁剪出圆形外的区域
  ctx.save()
  ctx.beginPath()
  // 绘制全屏矩形
  ctx.rect(0, 0, canvas.width, canvas.height)
  // 绘制需要高亮的圆形，参数分别为圆心横坐标、纵坐标、高亮圆半径
  ctx.arc(canvas.width/2, canvas.height/2, 100, 0, Math.PI * 2)
  // 用xor模式得到圆形外的区域作为裁剪范围
  ctx.globalCompositeOperation = 'xor'
  ctx.clip()
  
  // 第三步：对裁剪区域应用模糊并绘制背景
  ctx.filter = 'blur(12px)'
  ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height)
  
  // 恢复上下文状态
  ctx.restore()
}

// 如果需要移动高亮圆，重新执行上述绘制逻辑修改arc的坐标参数即可

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