ThinkSSL🔒 一键申购 5分钟快速签发 30天无理由退款 购买更放心 广告
&emsp;&emsp;滤镜(filter)可改造元素的视觉呈现,CSS内置的滤镜有10种,通过SVG文件还能自定义滤镜。 ## 一、调色滤镜 &emsp;&emsp;调色滤镜可控制元素的模糊、颜色、亮度等变化,并且多个滤镜可组合在一起使用。这些滤镜大部分既能接收百分数,也能接收数值。当传入的值大于上限值时,会以上限值来处理。 **1)模糊** &emsp;&emsp;blur()滤镜会对元素进行高斯模糊的处理,它能接收一个模糊半径的长度值。注意,不能向其传递负数。在下图中,右侧是调用了blur()滤镜后的效果。 ~~~css div { filter: blur(5px); } ~~~ :-: ![](https://img.kancloud.cn/03/a0/03a0879ad4348fc406e9c520b8b3fefb_882x461.png =450x) **2)透明** &emsp;&emsp;opacity()滤镜可控制元素的透明度,其默认值为1或100%(表示不透明),最小值为0。opacity()滤镜与opacity属性类似,但两者不是互斥关系,可同时应用于同一个元素,不过opacity属性会在执行完所有的滤镜后再起作用。在下图中,右侧是调用了opacity()滤镜后的效果。 ~~~css div { filter: opacity(.5); } ~~~ :-: ![](https://img.kancloud.cn/cc/49/cc49f0672bb6ea3258e021f0db46c784_855x414.png =450x) **3)阴影** &emsp;&emsp;drop-shadow()滤镜可为元素的透明部分提供阴影,其取值与text-shadow属性类似,也是X轴与Y轴的偏移、模糊半径以及颜色。下图使用了一张透明的五角星图,右侧调用了drop-shadow()滤镜,阴影会沿着透明轮廓渲染。 ~~~css div { filter: drop-shadow(5px 5px 5px #F60); } ~~~ :-: ![](https://img.kancloud.cn/c4/09/c40951069f77d0db683458d06f185aa0_474x228.png =450x) **4)灰度** &emsp;&emsp;grayscale()滤镜能转换元素的灰度,当值为1或100%时,元素会转换成完全的灰度。在下图中,右侧是调用了grayscale()滤镜后的效果。 ~~~css div { filter: grayscale(100%); } ~~~ :-: ![](https://img.kancloud.cn/d5/16/d516edf85ab7f38f074c6be95380b3b4_855x414.png =450x) **5)褐色** &emsp;&emsp;sepia()滤镜能指定元素褐色的比例,即用褐色为元素上色。当值为1或100%时,元素会转换成完全的深褐色。在下图中,右侧是调用了sepia()滤镜后的效果。 ~~~css div { filter: sepia(100%); } ~~~ :-: ![](https://img.kancloud.cn/c0/e5/c0e515a2a169be2cb64d81037cdf15d2_855x415.png =450x) **6)反转** &emsp;&emsp;invert()滤镜能将元素的颜色反转处理,即用255或100%减去颜色的R、G和B通道的值。在下图中,右侧是调用了invert()滤镜后的效果。 ~~~css div { filter: invert(100%); } ~~~ :-: ![](https://img.kancloud.cn/72/2a/722a21d0c62800eea90263a416375a36_855x414.png =450x) **7)色相旋转** &emsp;&emsp;hue-rotate()滤镜能接收一个角度值,参照标准色轮(如下图)旋转元素的整体色相。 :-: ![](https://img.kancloud.cn/15/29/15294b4448a186c8e5d912f1fd18c895_816x815.png =300x) &emsp;&emsp;在下图中,右侧是调用了hue-rotate()滤镜旋转90°后的效果。 ~~~css div { filter: hue-rotate(90deg); } ~~~ :-: ![](https://img.kancloud.cn/2c/97/2c97e2a4fb765bcd07946e46a20f27fc_855x414.png =450x) **8)亮度** &emsp;&emsp;brightness()滤镜能调整元素的明暗程度,值越小,元素越暗。在下图中,右侧是调用了brightness()滤镜后的效果。 ~~~css div { filter: brightness(50%); } ~~~ :-: ![](https://img.kancloud.cn/a0/1f/a01f018f306fd3dd3256fe32a8b306b9_855x414.png =450x) **9)对比度** &emsp;&emsp;contrast()滤镜能调整元素颜色的对比度,对比度越低,颜色越接近。在下图中,右侧是调用了contrast()滤镜后的效果。 ~~~css div { filter: contrast(30%); } ~~~ :-: ![](https://img.kancloud.cn/a7/84/a78480e12704a5ba44998608d92dea01_855x414.png =450x) **10)饱和度** &emsp;&emsp;saturate()滤镜能调整元素颜色的饱和度,饱和度越低,颜色越暗。在下图中,右侧是调用了saturate()滤镜后的效果。 ~~~css div { filter: saturate(50%); } ~~~ :-: ![](https://img.kancloud.cn/ee/b3/eeb360b249603a918c3eb92d7d697049_855x414.png =450x) **11)组合** &emsp;&emsp;在声明filter属性时,可定义多个滤镜函数,用空格分隔,如下所示。在下图中,右侧是调用了多个滤镜后的效果。 ~~~css div { filter: drop-shadow(5px 5px 5px #F60) sepia(100%) saturate(50%); } ~~~ :-: ![](https://img.kancloud.cn/63/10/631008d6408c09998322ee99718627d9_872x451.png =450x) ## 二、SVG滤镜 &emsp;&emsp;所有的CSS滤镜都能通过SVG滤镜实现。以blur(5px)为例,首先用一个名为filter.svg的文件描绘模糊的效果,其内容如下所示。 ~~~html <svg height="0" xmlns="http://www.w3.org/2000/svg"> <filter id="blur" x="-5%" y="-5%" width="110%" height="110%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> </filter> </svg> ~~~ &emsp;&emsp;然后通过url()函数引用SVG文件中的滤镜,注意,井号后面跟着的是filter元素的id属性值,效果如下图所示。 ~~~css div { filter: url(./filter.svg#blur); } ~~~ :-: ![](https://img.kancloud.cn/31/b4/31b421ec789bfd47bf0ff2a5979cef2e_467x466.png =300x) &emsp;&emsp;通过SVG文件的方式就能创造出各种功能的滤镜,以适应更多的复杂场景。 ***** > 原文出处: [博客园-CSS躬行记](https://www.cnblogs.com/strick/category/1667864.html) [知乎专栏-CSS躬行记](https://zhuanlan.zhihu.com/pwcss) 已建立一个微信前端交流群,如要进群,请先加微信号freedom20180706或扫描下面的二维码,请求中需注明“看云加群”,在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily),欢迎浏览。 ![](https://box.kancloud.cn/2e1f8ecf9512ecdd2fcaae8250e7d48a_430x430.jpg =200x200) 推荐一款前端监控脚本:[shin-monitor](https://github.com/pwstrick/shin-monitor),不仅能监控前端的错误、通信、打印等行为,还能计算各类性能参数,包括 FMP、LCP、FP 等。