css如何制作页面模糊

使用 backdrop-filter 实现元素背景模糊

通过 backdrop-filter: blur(px) 属性，可以模糊元素背后的内容（不影响元素本身）。适用于模态框、悬浮菜单等场景。

.blur-background {
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.5); /* 半透明背景增强效果 */
}

使用 filter 模糊整个元素

通过 filter: blur(px) 会模糊元素及其子内容。适合模糊图片或特定区块。

.blur-element {
  filter: blur(3px);
}

模糊页面背景（固定定位覆盖层）

在页面顶层添加一个固定定位的覆盖层，模糊整个页面内容。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px);
  z-index: 100;
}

性能优化建议

• 避免过度模糊（通常 blur(5px) 以内足够）。
• 对需要模糊的元素添加 will-change: transform 提升渲染性能。
• 在移动端谨慎使用，部分旧设备可能不支持 backdrop-filter。

浏览器兼容性处理

为兼容不支持 backdrop-filter 的浏览器（如 Firefox 默认未开启），可添加备用方案：

@supports not (backdrop-filter: blur(1px)) {
  .blur-background {
    background-color: rgba(0, 0, 0, 0.7); /* 深色半透明替代 */
  }
}