Backdrop Filter

CSS 滤镜 : backdrop-filter

backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。

滤镜：	名称：	方法案例：	效果：
blur()	模糊	: blur(5px)
brightness()	亮度	: brightness(1.4);
contrast()	对比度	: contrast(2);
drop-shadow()	投影	: drop-shadow(4px 4px 8px #fff);	与box-shadow大同小异, 可以让任意的图形区域，只要是非透明的都能产生投影效果
grayscale()	灰度	: grayscale(60%);
hue-rotate()	色调变化	: hue-rotate(66deg);
invert()	反相	: invert(60%);
opacity()	透明度	: opacity(50%);	效果类似于background-color: rgba(x,x, x, x);
saturate()	饱和度	: saturate(250%);
sepia()	褐色	: sepia(70%);

原图：

其实这些效果看下来，就和ps里面的功能一样(名字都是一样的！)。如果还是不太理解可以打开ps看看。

在此有个重点：

Backdrop-Filte虽然好但是兼容是个问题。

Pc端的IE是不支持的、移动端的Firefox也不支持、版本较低的基本也不支持。

Backdrop-Filte虽然和filter的语法一样但是效果可不一样！！

欢迎关注微信公众号《农民工前端》，共同学习！！！