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);
}不支持的浏览器可改用半透明背景或降级方案。
