Backdrop Filter

CSS 滤镜 : backdrop-filter

在工作中经常需要对图片的处理，大部分都是让 ui 解决。但是有的时候不太能够单纯替换图解决的场景，或许我们需要，使用能和 ps 一样对图片处理的滤镜或者属性。backdrop-filter 的出现，非常好的解决了这一个问题。

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

让我们先看看 backdrop-filter 到底有哪些滤镜效果。

效果案例

1.blur()-模糊

: blur(5px)

效果：

2.brightness()-亮度

: brightness(1.4);

效果：

3.contrast()-对比度

: contrast(2);

效果：

4.drop-shadow()-投影

: drop-shadow(4px 4px 8px #fff);

与 box-shadow 大同小异, 可以让任意的图形区域，只要是非透明的都能产生投影效果

5.grayscale()-灰度

: grayscale(60%);

效果：

6.hue-rotate()-色调变化

: hue-rotate(66deg);

7.invert()-反相

: invert(60%);

效果：

8.opacity()-透明度

: opacity(50%);

效果类似于 background-color: rgba(x,x, x, x);

9.saturate()-饱和度

: saturate(250%);

效果：

10.sepia()-褐色

: sepia(70%);

效果：

原图：

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

在此有个重点：

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

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

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

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