使用CSS的backdrop-filter属性可实现毛玻璃效果，需配合半透明背景和-webkit-backdrop-filter兼容Safari；filter:blur()则用于模糊元素自身背景图，常通过伪元素实现；注意backdrop-filter在旧版浏览器中支持有限。
在网页设计中，背景虚化（也叫毛玻璃效果）常用于模态框、导航栏或卡片组件，让界面更有层次感。HTML本身不支持直接设置背景模糊，但可以通过CSS的 filter 和 backdrop-filter 属性轻松实现。
1. 使用 backdrop-filter 实现背景虚化（推荐）
backdrop-filter 是专为“背后内容”设计的滤镜属性，适合做毛玻璃效果，只模糊元素背后的页面内容，不影响自身子元素。
常用于半透明的弹窗、侧边栏或头部导航。
示例代码：
立即学习“前端免费学习笔记（深入）”；
这是毛玻璃面板内容
关键点：
- 必须设置透明或半透明背景（如 rgba）才能看到背后内容
- 添加 -webkit-backdrop-filter 提高 Safari 浏览器兼容性
- blur 值越大，模糊越强，一般 5px~15px 效果较自然
2. 使用 filter 对自身背景图模糊
如果你希望某个元素的背景图片被模糊，可以用 filter: blur() 作用于该元素或其伪元素。
常见做法：用伪元素设置背景并模糊，主元素显示内容。
说明：
- ::before 伪元素作为背景层，应用 filter 模糊
- 主内容放在正常文档流中，保持清晰
- 适用于固定背景图的卡片、封面等场景
3. 注意事项与兼容性
虽然效果美观，但需注意以下几点：
- backdrop-filter 在部分旧浏览器（如 Chrome
- 过度使用模糊可能影响性能，尤其在移动设备上
- 确保文字与模糊背景之间有足够的对比度，保证可读性
- 避免在滚动区域频繁使用，防止卡顿
基本上就这些。用 backdrop-filter 做交互组件的虚化背景，用 filter + 伪元素处理静态背景模糊，合理搭配能让页面更具现代感。
