Backdrop Filter

### CSS `backdrop-filter` 和 `filter` 的区别 #### 功能定位 - **Filter**: 此属性应用于元素本身及其内容，通过一系列滤镜函数改变视觉效果。这些变化可以包括模糊、颜色转换等多种图像处理操作[^1]。 - **Backdrop-filter**: 这一特性专门针对元素背后的内容起作用；也就是说，它会修改透过该元素可见的其他组件或页面部分的效果，而不直接影响此元素自身的外观。 #### 浏览器兼容性和性能考量 - 对于 `backdrop-filter` 来说，当前存在一定的跨平台一致性挑战，尤其是在 Android 移动端设备上表现欠佳。此外，在复杂网页结构中广泛采用此类特效可能会带来额外渲染负担，需注意优化以维持良好用户体验[^3]。 #### 实际应用场景对比 ##### Filter 示例 当希望对某个特定图片应用灰度处理时： ```css img { filter: grayscale(100%); } ``` 这段代码会使指定 `<img>` 标签内的图像呈现完全黑白状态[^2]。 ##### Backdrop-filter 示例 假设有一个半透明模态框（弹窗），想要让其后的整个网站界面看起来像是被轻微高斯模糊过一样，则可如下配置样式表： ```css .modal-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, .8); backdrop-filter: blur(10px); /* 模糊底层 */ } ``` 这里的关键在于设置了 `.modal-overlay` 类下的 `position`, `top`, `bottom`, `left`, `right` 属性使其占据全屏位置，并给予适当透明度的颜色作为背景色，再配合 `backdrop-filter` 达成所需视效。