Backdrop Filter
- 2020 年 12 月 26 日
- 筆記
CSS 滤镜 : backdrop-filter
backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。
滤镜: |
名称: |
方法案例: |
效果: |
blur() |
模糊 |
filter: blur(5px) |
|
brightness() |
亮度 |
filter: brightness(1.4); |
|
contrast() |
对比度 |
filter: contrast(2); |
|
drop-shadow() |
投影 |
filter: drop-shadow(4px 4px 8px #fff); |
与box-shadow大同小异, 可以让任意的图形区域,只要是非透明的都能产生投影效果 |
grayscale() |
灰度 |
filter: grayscale(60%); |
|
hue-rotate() |
色调变化 |
filter: hue-rotate(66deg); |
|
invert() |
反相 |
filter: invert(60%); |
|
opacity() |
透明度 |
filter: opacity(50%); |
效果类似于background-color: rgba(x,x, x, x); |
saturate() |
饱和度 |
filter: saturate(250%); |
|
sepia() |
褐色 |
filter: sepia(70%); |
|
原图:
其实这些效果看下来,就和ps里面的功能一样(名字都是一样的!)。如果还是不太理解可以打开ps看看。
在此有个重点:
Backdrop-Filte虽然好但是兼容是个问题。
Pc端的IE是不支持的、移动端的Firefox也不支持、版本较低的基本也不支持。
Backdrop-Filte虽然和filter的语法一样但是效果可不一样!!