使用 CSS Backdrop-Filter 创建模糊背景

现代 Web 界面需要在不牺牲性能的前提下实现视觉深度。CSS backdrop-filter 属性为创建模糊背景和玻璃拟态效果提供了强大的解决方案。与需要重复元素或复杂变通方法的传统模糊技术不同,backdrop-filter 提供了一种简洁高效的方式来实现这些流行的设计模式。

理解 CSS Backdrop-Filter 与 Filter 的区别

backdrop-filter 属性将图形效果应用于元素后面的区域,而标准的 filter 属性则影响元素本身及其子元素。这一根本差异使得 backdrop-filter 非常适合创建磨砂玻璃效果,在这种效果中内容保持清晰,而背景则被模糊。

/* 模糊元素及其内容 */
.with-filter {
  filter: blur(10px);
}

/* 仅模糊元素后面的背景 */
.with-backdrop-filter {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.2);
}

使用 backdrop-filter 的元素必须具有透明度才能显示效果——可以通过 opacity 或半透明背景实现。

使用 CSS Blur() 创建玻璃拟态效果

玻璃拟态依赖于三个关键组件:透明度、模糊和细微边框。以下是最小化实现:

.glass-card {
  backdrop-filter: blur(16px);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

<div class="glass-card">
  <h2>磨砂玻璃效果</h2>
  <p>内容保持完全清晰</p>
</div>

要获得更强的磨砂玻璃效果,可以组合多个背景滤镜:

.frosted-panel {
  backdrop-filter: blur(20px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.15);
}

浏览器支持

CSS backdrop-filter 现在在所有主流浏览器中都获得了基准支持:

• Chrome 76+ ✅ 完全支持
• Edge (Chromium) 79+ ✅ 完全支持
• Firefox 103+ ✅ 完全支持
• Safari 9+ ✅ 完全支持(17 版本之前需要 -webkit- 前缀)
• Internet Explorer ❌ 不支持

Safari 17 及更高版本不再需要 -webkit- 前缀。对于较旧的 Safari 版本,请包含带前缀的版本:

.glass-element {
  -webkit-backdrop-filter: blur(10px); /* Safari 16 及更早版本 */
  backdrop-filter: blur(10px);
}

性能考虑

背景滤镜会触发 GPU 加速合成,但可能会影响移动设备的性能。遵循以下优化策略:

.optimized-blur {
  backdrop-filter: blur(12px);
  will-change: backdrop-filter; /* 浏览器优化提示 */
  transform: translateZ(0); /* 强制 GPU 图层 */
}

限制同时使用 backdrop-filter 的元素数量。在移动设备上,考虑减小模糊半径或完全禁用效果:

@media (max-width: 768px) and (hover: none) {
  .glass-card {
    backdrop-filter: blur(8px); /* 在触摸设备上减少模糊 */
  }
}

无障碍访问和用户偏好

尊重用户对降低透明度和动画的偏好:

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.95);
  }
}

@media (prefers-contrast: high) {
  .glass-card {
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.5);
  }
}

确保模糊背景上的文本具有足够的颜色对比度。WCAG AA 标准要求普通文本为 4.5:1,大文本为 3:1。

旧版浏览器的降级技术

对于不支持 backdrop-filter 的浏览器,实现优雅降级:

.glass-fallback {
  /* 不支持的浏览器的降级方案 */
  background-color: rgba(255, 255, 255, 0.85);
  
  /* 支持的现代浏览器 */
  @supports (backdrop-filter: blur(10px)) {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
  }
}

使用伪元素为旧版浏览器提供替代方案:

.legacy-blur {
  position: relative;
  background-color: rgba(255, 255, 255, 0.9);
}

.legacy-blur::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(10px);
  z-index: -1;
}

@supports (backdrop-filter: blur(10px)) {
  .legacy-blur::before {
    display: none;
  }
  .legacy-blur {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.2);
  }
}

总结

CSS backdrop-filter 改变了我们在现代 Web 设计中创建模糊背景和玻璃拟态效果的方式。凭借基准浏览器支持,开发者可以自信地实现这些效果,同时通过 GPU 优化保持性能并尊重用户的无障碍访问偏好。功能检测和渐进增强的结合确保了体验在剩余的旧版浏览器中能够优雅降级,同时为现代用户提供精致的界面。

常见问题

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..