Backdrop Filter

CSS 滤镜 : backdrop-filter

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

滤镜:

名称:

方法案例:

效果:

blur()

模糊

: blur(5px)

Backdrop Filter_第1张图片

brightness()

亮度

: brightness(1.4);

 Backdrop Filter_第2张图片

contrast()

对比度

: contrast(2);

 Backdrop Filter_第3张图片

drop-shadow()

投影

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

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

grayscale()

灰度

: grayscale(60%);

 Backdrop Filter_第4张图片

hue-rotate()

色调变化

: hue-rotate(66deg);

invert()

反相

: invert(60%);

 Backdrop Filter_第5张图片

opacity()

透明度

: opacity(50%);

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

saturate()

饱和度

: saturate(250%);

 Backdrop Filter_第6张图片

sepia()

褐色

: sepia(70%);

 Backdrop Filter_第7张图片

原图:

Backdrop Filter_第8张图片

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

在此有个重点

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

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

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

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

你可能感兴趣的:(css,css,vue,javascript,java,css3)