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的语法一样但是效果可不一样！！
欢迎关注微信公众号《农民工前端》，共同学习！！！