backdrop-filter 是CSS中的一个属性，用于对元素后方区域（即元素背景后面的内容）应用图形效果（如模糊、颜色偏移等）。它最经典的应用场景就是实现毛玻璃效果（Glassmorphism）——半透明面板后面透出的内容被模糊处理，营造出磨砂玻璃的视觉质感。

与 filter 属性不同，filter 作用于元素本身（包括其子元素），而 backdrop-filter 仅影响元素背后的区域，元素自身内容不受影响。这使得它在创建现代UI效果时非常实用。

目前主流浏览器对 backdrop-filter 的支持情况：

• Chrome 76+：完全支持（无前缀）
• Edge 79+：完全支持（无前缀）
• Safari 9+：需要 -webkit-backdrop-filter 前缀
• Firefox 103+：支持（无前缀），但需在 about:config 中开启（部分版本默认支持）
• iOS Safari 9+：需要 -webkit- 前缀

为确保最佳兼容性，建议始终同时提供带 -webkit- 前缀和无前缀的声明。本工具生成的代码已自动包含两个版本。

会有一定影响，尤其是在移动设备或低性能设备上。每次页面滚动或元素移动时，浏览器都需要对背景进行实时重新计算。以下是一些优化建议：

• 避免在大量元素上同时使用 backdrop-filter
• 尽量使用较简单的滤镜函数（如仅 blur()）
• 在移动端考虑使用 will-change: backdrop-filter 提示浏览器优化
• 对于动画场景，优先使用 opacity 和 transform 动画
• 测试低端设备表现，必要时为移动端提供降级方案

经典毛玻璃效果通常由以下CSS属性组合而成：

/* 半透明背景 */
background: rgba(255, 255, 255, 0.25);
/* 背景模糊 */
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
/* 圆角与边框 */
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
/* 柔和阴影 */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

关键要素：半透明背景 + backdrop-filter模糊 + 圆角边框 + 柔和阴影。适当提高饱和度（saturate）可以让模糊后的颜色更加鲜艳生动。

多个滤镜函数用空格分隔，例如：backdrop-filter: blur(10px) saturate(150%) brightness(1.1);

在大多数情况下，滤镜函数的顺序不影响最终视觉效果，因为它们都是作为整体应用的。但为了代码可读性，建议将 blur() 放在最前面，其他滤镜按逻辑排列。

本工具按 blur → brightness → contrast → grayscale → hue-rotate → invert → opacity → saturate → sepia 的顺序生成CSS代码。

• iOS Safari：从iOS 9开始支持，但需要 -webkit- 前缀。建议测试iOS 14及以下版本的兼容性。
• Android Chrome：Chrome 76+支持良好，但低端Android设备可能出现卡顿。
• 性能监控：在移动端使用多个滤镜或高blur值（>15px）时，建议进行实际设备测试。
• 降级方案：对于不支持backdrop-filter的浏览器，可以提供一个略微加深的半透明背景色作为fallback。

• 导航栏毛玻璃：固定顶部导航栏使用 backdrop-filter 模糊后方滚动内容
• 模态弹窗背景：弹窗遮罩层使用 blur + brightness 降低后方内容干扰
• 信息卡片：在彩色背景上放置半透明卡片，营造层次感
• 视频叠加层：在视频上方叠加半透明UI控件，模糊后方视频
• 图片说明文字：图片上的文字背景使用 backdrop-filter 提高可读性
• 侧边栏：侧边导航栏使用毛玻璃效果，保持页面整体视觉通透