实现毛玻璃效果,颜色滤镜,背景模糊的css属性backdrop-filter

backdrop-filter 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。

　　　　　　　　因为它适用于元素背后的所有元素。

这个方法不仅能轻松实现毛玻璃，而且还轻松地实现了各种滤镜，颜色偏转

实现毛玻璃的时候不像blur那样需要添加多余背景，不兼容IE

用法如下：

/* 指向 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%);

详情查看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter

效果如下：

backdrop-filter: blur(10px);

 

backdrop-filter: hue-rotate(120deg);

 

 

 

backdrop-filter: invert(70%);

backdrop-filter: sepia(90%);