CSS中的filter与backdrop-filter属性的异同点
还记得毛玻璃效果吗？不知道你是否用filter属性设置过毛玻璃效果，其实实现这个效果的最佳方案应该使用backdrop-filter，因为filter导致模糊四周露白，模糊不均匀，但是backdrop-filter的兼容性较差与filter，随着现代浏览器的发展，也兼容也逐渐跟上了，所以这个css属性我们还是可以尝试一下的。
在 CSS 中，有两个和滤镜相关的属性 — filter 和 backdrop-filter。
定义
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
注意：backdrop-filter的前提是：元素或其背景至少部分透明，如果元素不设置半透明，此属性不会生效！
区别
filter和backdrop-filter具有一定区别：
- Filter不仅仅作用于当前元素，后代元素也会继承这个属性，作用于一个空背景元素则没有效果。
- backdrop-filter 是使透过该层的底部元素模糊化。
- backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
- backdrop-filter目前兼容性不佳，尤其是安卓移动端。
注意两者之间的差异，filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素。
它们所支持的滤镜种类：
| Filter | Backdrop-Filter | 备注 | |
|---|---|---|---|
| url | √ | √ | 获取指向SVG过滤器的URI |
| blur | √ | √ | 高斯模糊滤镜 |
| brightness | √ | √ | 图像明亮度的滤镜 |
| contrast | √ | √ | 图像的对比度滤镜 |
| drop-shadow | √ | √ | 图像的阴影滤镜 |
| grayscale | √ | √ | 图像灰度滤镜 |
| hue-rotate | √ | √ | 图像色相滤镜 |
| invert | √ | √ | 反转滤镜 |
| opacity | √ | √ | 透明度滤镜 |
| sepia | √ | √ | 深褐色滤镜 |
| saturate | √ | √ | 图像饱和度滤镜 |
可以看到，两者所支持的滤镜种类是一模一样的。
用法
/* 关键词值 */
backdrop-filter: none;
/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px); /*高斯模糊*/
backdrop-filter: brightness(60%); /* 亮度 */
backdrop-filter: contrast(40%); /* 对比度 */
backdrop-filter: drop-shadow(4px 4px 10px blue); /* 阴影 */
backdrop-filter: grayscale(30%); /* 灰度 */
backdrop-filter: hue-rotate(120deg); /* 色相旋转 */
backdrop-filter: invert(70%); /* 反色 */
backdrop-filter: opacity(20%); /* 透明度 */
backdrop-filter: sepia(90%); /* 褐色 */
backdrop-filter: saturate(80%); /* 饱和度 */
/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%)
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
