开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情
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的语法一样但是效果可不一样！！
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情
