还记得毛玻璃效果吗?不知道你是否用filter属性设置过毛玻璃效果,其实实现这个效果的最佳方案应该使用backdrop-filter,因为filter导致模糊四周露白,模糊不均匀,但是backdrop-filter的兼容性较差与filter,随着现代浏览器的发展,也兼容也逐渐跟上了,所以这个css属性我们还是可以尝试一下的。

1.定义:

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。
注意:backdrop-filter的前提是:元素或其背景至少部分透明,如果元素不设置半透明,此属性不会生效! 

2.用法 —— 和filter一样,可用值:

/* 关键词值 */
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%)

3.案例:

最好的案例还是苹果官网的导航背景了:https://www.apple.com.cn/

4.兼容性

backdrop-filter兼容性:IE/火狐/uc/QQ浏览器不支持,请用filter进行适配兼容