一、全局模糊的技术价值与应用场景

在Web与移动端开发中，全局模糊（Global Blur）已成为提升界面视觉层次的关键技术。通过将背景或特定区域模糊处理，可有效突出前景内容（如弹窗、导航栏），减少视觉干扰，同时营造现代感的设计风格。典型应用场景包括：

1. 模态弹窗：模糊背景突出对话框内容，如登录框、提示框；
2. 导航栏设计：滚动时模糊背景图片，增强文字可读性；
3. 图片画廊：选中图片时模糊周围缩略图，聚焦当前项；
4. 数据可视化：模糊次要图表区域，突出核心数据。

二、CSS滤镜方案：快速实现与性能权衡

1. 基础实现：filter: blur()

CSS的filter属性提供最直接的模糊实现：

.background {
  filter: blur(5px);
}

优势：代码简洁，兼容性好（IE9+需-ms-filter前缀），支持硬件加速。
局限性：

• 模糊区域边缘可能产生锯齿；
• 模糊半径过大时性能下降（尤其在移动端）；
• 无法直接控制模糊的“扩散范围”（模糊会均匀应用于整个元素）。

2. 性能优化策略

• 限制模糊区域：将模糊应用于<div>而非整个页面，减少重绘面积；
• 使用will-change：提前告知浏览器元素可能变化，优化渲染：

  .blur-element {
    will-change: filter;
  }

• 避免动态模糊：频繁修改blur()值会导致连续重排，建议通过类切换实现状态变化。

3. 跨浏览器兼容性

• 前缀处理：

  .blur-element {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
  }

• 降级方案：对不支持filter的浏览器，可通过半透明遮罩层模拟模糊效果。

三、Canvas方案：精细控制与动态效果

1. 基础实现步骤

1. 创建Canvas元素：设置宽高与目标区域一致；
2. 绘制目标内容：使用drawImage将背景或图片绘制到Canvas；
3. 应用模糊算法：通过像素操作实现自定义模糊；
4. 叠加到页面：将Canvas作为背景或覆盖层使用。

示例代码：

function applyCanvasBlur(elementId, radius) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const element = document.getElementById(elementId);
  // 设置Canvas尺寸
  canvas.width = element.offsetWidth;
  canvas.height = element.offsetHeight;
  // 绘制元素到Canvas
  ctx.drawImage(element, 0, 0);
  // 简单模糊算法（高斯模糊简化版）
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  // 此处应实现模糊算法（示例省略具体计算）
  // 将模糊后的数据放回Canvas
  ctx.putImageData(imageData, 0, 0);
  // 替换原元素或作为背景
  element.style.backgroundImage = `url(${canvas.toDataURL()})`;
}

2. 高级模糊算法

• 高斯模糊：通过卷积核计算像素周围区域的加权平均，效果更自然；
• 堆栈模糊：多次应用小半径模糊，模拟大半径效果，减少计算量；
• 性能优化：使用OffscreenCanvas（Chrome 69+）在后台线程处理模糊。

3. 动态模糊控制

Canvas方案支持通过JavaScript动态调整模糊参数：

let blurRadius = 0;
function animateBlur() {
  blurRadius += 0.5;
  if (blurRadius > 10) blurRadius = 0;
  applyCanvasBlur('target', blurRadius);
  requestAnimationFrame(animateBlur);
}

四、混合模式与遮罩层：增强模糊效果

1. CSS混合模式

结合background-blend-mode可创造更丰富的模糊效果：

.container {
  background-image: url('background.jpg');
  background-blend-mode: overlay;
}
.blur-overlay {
  filter: blur(5px);
  mix-blend-mode: multiply;
}

2. 遮罩层技巧

通过mask-image控制模糊的可见区域：

.masked-blur {
  filter: blur(5px);
  mask-image: radial-gradient(circle, white 50%, transparent 70%);
}

五、性能对比与选择建议

方案	开发效率	性能开销	动态控制	兼容性
CSS滤镜	高	中	低	广泛
Canvas	低	高	高	现代浏览器
混合模式	中	低	中	需前缀

选择建议：

• 静态页面或简单效果：优先使用CSS滤镜；
• 动态模糊或复杂控制：选择Canvas方案；
• 需要兼容旧浏览器：结合CSS滤镜与遮罩层降级。

六、实际案例：弹窗背景模糊

需求：实现弹窗显示时背景模糊，关闭时恢复。

CSS方案实现：

<div class="page">
  <div class="content">页面内容</div>
  <div class="modal">
    <div class="modal-content">弹窗内容</div>
  </div>
</div>

.page {
  transition: filter 0.3s;
}
.modal.active ~ .page {
  filter: blur(5px);
}

Canvas方案优化：

document.querySelector('.modal-open').addEventListener('click', () => {
  const page = document.querySelector('.page');
  const canvas = document.createElement('canvas');
  // ...绘制页面到Canvas并模糊
  page.style.backgroundImage = `url(${canvas.toDataURL()})`;
  page.style.filter = 'none'; // 关闭CSS滤镜
});

七、总结与展望

全局模糊的实现需平衡开发效率、视觉效果与性能。CSS滤镜方案适合快速开发，而Canvas方案提供更精细的控制。未来，随着WebGPU的普及，浏览器端的图像处理能力将进一步提升，模糊效果的实现将更加高效与灵活。开发者应根据项目需求选择合适方案，并通过性能测试工具（如Chrome DevTools的Performance面板）持续优化。