开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情

前言

最近在项目中需要用到毛玻璃效果,其中的一种方法就是使用filter来实现,所以我们来谈谈 filter是什么.

filter

filter是将我们设置的一些效果作用到元素上,像模糊、高亮、出现阴影等等. 我们先来个图示看看效果:

属性	效果
blur(5px)
contrast(200%);
grayscale(80%);
hue-rotate(90deg)
drop-shadow(16px 16px 20px red) invert(75%);

接下来我们对上面每个属性进行分析

blur()函数会将高斯模糊作用在图像上面,函数参数就是我们设置的模糊程度,默认是0.

contrast()函数可以调整图像的对比度,和我们手机对照片的对比度类似.接收一个百分值或者数值,默认是100%或者1,如果值是0%的话,图像就是显示的是全黑,值是100%的话,图像不变,总之数值越低,图像越黑.

grayscale()函数将改变图像的灰色程度,接收一个百分比或者数值,默认是0%,数值越高,灰色越明显,直到100%,图像会完全变成灰色.现在大多数网站变成灰色都是用的这个属性.

hue-rotate()函数在图像上面进行一个色相的转变,默认是0deg,同时是无上限的,会以360为周期,360deg和0deg显示的效果是一样的.

drop-shadow()函数对图像设置一个阴影效果,阴影可以设置一个模糊程度,和box-shadow传入的参数类似.