css如何制作页面模糊

使用 backdrop-filter 属性实现模糊效果

通过 backdrop-filter: blur(数值) 可以直接对元素背后的区域应用模糊效果。例如：

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

此方法适用于模态框、菜单等需要模糊底层内容的场景。

通过 filter 模糊元素本身

若需模糊元素自身（如图片或区块），使用 filter: blur()：

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

注意：子元素内容也会被模糊，可能需调整结构。

伪元素叠加实现背景模糊

对特定区域背景模糊时，可用伪元素覆盖并模糊：

.blur-container {
  position: relative;
  overflow: hidden;
}
.blur-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("背景图路径");
  filter: blur(10px);
  z-index: -1;
}

性能优化建议

• 避免大面积使用模糊，尤其在移动端。
• 结合 will-change: transform 或 transform: translateZ(0) 触发硬件加速。
• 模糊值（如 blur(5px)）越大，性能消耗越高。

兼容性处理

backdrop-filter 需兼容旧浏览器时，添加前缀：

.blur-fallback {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

不支持的浏览器可改用半透明背景或降级方案。