什么是CSS滤镜?

CSS滤镜属性名filter,通常用于设置图片可视化效果,也可以设置与视频video可视化效果。

案例原图

前端css背景图解(前端CSS滤镜讲解)(1)

前端css背景图解(前端CSS滤镜讲解)(2)

首先展示案例原图,接下来的参数案例我就不一一展示原图了。

filter滤镜参数blur(模糊度)

前端css背景图解(前端CSS滤镜讲解)(3)

前端css背景图解(前端CSS滤镜讲解)(4)

我们可以发现案例中使用blur属性可以将图片模糊

filter滤镜参数Brightness(高亮属性)

前端css背景图解(前端CSS滤镜讲解)(5)

前端css背景图解(前端CSS滤镜讲解)(6)

使用高亮属性我们可以将图片设置更亮或者更暗。

filter滤镜参数Contrast(对比度)

前端css背景图解(前端CSS滤镜讲解)(7)

前端css背景图解(前端CSS滤镜讲解)(8)

通过对比度属性,我们可以让图片的颜色与颜色之间更加突出。

filter滤镜参数drop-shadow(阴影度)

前端css背景图解(前端CSS滤镜讲解)(9)

前端css背景图解(前端CSS滤镜讲解)(10)

drop-shadow与box-shadow相比,drop-shadow可以制作图形(图案,多边形)阴影,而box-shadow只能制作边框(DIV矩形)阴影。

filter滤镜参数Grayscale(灰色度)

前端css背景图解(前端CSS滤镜讲解)(11)

前端css背景图解(前端CSS滤镜讲解)(12)

通过Grayscale属性,可以将我们的图片设置成灰色。

filter滤镜参数hue-rotate(图像应用色旋转)

前端css背景图解(前端CSS滤镜讲解)(13)

前端css背景图解(前端CSS滤镜讲解)(14)

可以通过输入的角度,使图像应用色相旋转。

filter滤镜参数invert(反转输入图像)

前端css背景图解(前端CSS滤镜讲解)(15)

前端css背景图解(前端CSS滤镜讲解)(16)

可以使图片形成颜色值比例形成反转效果

filter滤镜参数opacity(图片透明度)

前端css背景图解(前端CSS滤镜讲解)(17)

前端css背景图解(前端CSS滤镜讲解)(18)

透明度不用说,可以让图片透明化

filter滤镜参数saturate(图片饱和度)

前端css背景图解(前端CSS滤镜讲解)(19)

前端css背景图解(前端CSS滤镜讲解)(20)

饱和度可以让我们的图片更接近油画风格

filter滤镜参数Sepia(图片深褐色度)

前端css背景图解(前端CSS滤镜讲解)(21)

前端css背景图解(前端CSS滤镜讲解)(22)

图片深褐色度,可以让我们将图片渲染成民国时期或者古代时期图片,如上次图片进行渲染成老照片。

总结

CSS的filter可以使我们的图片或者视频实现PS功能的美化效果,大家可以充分发挥其属性应用在各个地方,如视频播放亮度调节等。

,