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的语法一样但是效果可不一样！！
