blog
blog copied to clipboard
verymuch
Filter Effects in Web (1)：CSS filter
过滤器效果可以在元素展示之前对元素的渲染进行处理。它是基于图片的效果，主要接受0或多个图片作为输入，然后指定特定的效果参数，最后生成一张图片作为输出。输出的图片会替代原始元素在DOM中渲染，或者被当做一个CSS图片值。
虽然过滤器效果一开始是为了SVG而设计的，但是在CSS中，我们也同样可以使用(通过filter属性)。
本文主要介绍的就是这一部分，CSS中的filter效果。后续我会再给大家介绍一下SVG中的filter效果。
CSS中的filter属性
在CSS中，我们可以通过filter属性使用过滤器效果。该属性可以应用在CSS中的任何元素上，除此之外，还可以应用在SVG中的容器元素（除<defs>外）、图形类元素（如circle、polyline等）以及<use>元素上。
filter值的格式为：filter: none | <filter-value-list>。
其中none表示无过滤器效果。<filter-value-list>等于[ <filter-function> | <url> ]+。<filter-function>是filter属性预设的效果函数，后面会详细介绍。<url>表示引用svg中的<filter>元素。如url(commonfilters.svg#filter)。如果引用的内容不存在或者不是一个filter元素，则忽略该引用。这一部分的细节我们会在下一篇SVG filter中详细介绍。
当元素的filter不为none时，会创建一个堆叠上下文，这对元素的层叠会产生影响。如下所示，对图中图片一应用drop-shadowfilter效果，其层级会覆盖在图片二的原图之上。
如果你对于CSS中元素的层级有什么疑问，可以参考我之前写的另一篇文章《 CSS的“层”峦“叠”翠 》。这篇文章会向你解释什么是层叠上下文，元素之间如何决定堆叠顺序。
预设的filter效果函数
CSS中预设的filter效果函数包括：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()。
需要注意的是，对于这些效果函数，初始值和缺省值（指定了函数但未传值）并不都是一样的。如grayscale()、sepia()、invert()当参数缺省时，值为1，等价于100%的效果，而它们的初始值是0。更需要的注意的是，这几种特殊情况在不同浏览器中表现并不一样，所以在使用时大家不要偷懒写了函数却不传值。
blur()高斯模糊
blur()向元素应用高斯模糊。该函数语法格式为：blur( <length>? )，接受一个长度值，不接受百分比，表示模糊半径。不接受负值，初始值和缺省值都是0px。
如下图所示，我们给图片元素应用了filter: blur(5px);。
brightness()明亮度
brightness()改变元素的明亮度。其语法格式为：brightness( <number-percentage>? )，值为数字或百分比。0%会将图片变为全黑，100%表示保持原样。初始值与默认值均为1。无效值或者负值均被视为1。大于1的值表示增加曝光度。
如下图所示，分别给出了值为0%， 50%，100%，200%的情况。
contrast()对比度
contrast()改变元素的对比度。其语法格式为：contrast( <number-percentage>? )，值为数字或百分比。0%则完全变为灰色，100%表示保持原样。初始值和默认值均为1。无效值或者负值均被视为1。大于1的值表示增加对比度。
如下图所示，分别给出了值为0%， 50%，100%，200%的情况。
drop-shadow()投影
drop-shadow()向元素应用一个投影效果。该函数接受的参数与CSS3的box-shadow属性类似，除了不能接受inset参数。区别在于使用filter，某些浏览器会启用硬件加速来进行优化。
语法格式如下：drop-shadow( <color>? && <length>{2,3} )。其中三个长度值依次对应<offset-x> <offset-y> <blur-radius> ，表示x轴偏移、y轴偏移以及模糊半径。如filter: drop-shadow(16px 16px 10px black) 。其中颜色值black放在前面或者后面都可以。
该方法的初始值中各长度为0，颜色值为transparent。
该方法的默认值中个长度也为0，但是颜色值会有一点比较特殊，即其会使用当前元素的color值。
如下例所示。图二在drop-shadow中指定了颜色，图三没有指定，则图三应用了color颜色。
grayscale()灰度变换
grayscale()能够对图像进行灰度处理。该函数接受一个值，语法格式为grayscale( <number-percentage>? )。值可以为数字或者百分比。100%表示完全为灰度的，注意不是全灰色的，只是变成黑白的了。0%表示保持原样。初始值为0，但默认值为1。无效值或者负值均被视为0。大于1的值效果等同于100%。
如下图展示了，值为0%，50%， 100%，200%的情况。
hue-rotate()色调旋转
hue-rotate()可以对指定元素应用色调旋转，语法格式为hue-rotate( [ <angle> | <zero> ]? )。接受一个角度angle值。用于定义将颜色在色环上旋转多少度。初始值和默认值均为0deg，表示无变化。无最大值限制，超过360deg的值会折算成小于360deg的等价值。
色环上各颜色的角度参考下图：
如果大家对颜色有兴趣，也可以看一看二哥之前发布的 《给你点颜色看看 》一文。
下面我们可以看下将色调旋转90度后上图的效果。对照上面的色环角度，可以预想天空变成了粉色。确实应用后的效果也是如此。
invert()颜色反转
invert()会将图片中的颜色进行反转。该函数语法格式为invert( <number-percentage>? ) ，接受一个值，值可以为数字或者百分比。100%表示完全反转，0%表示保持原样。初始值为0，但默认值为1。无效值或者负值均被视为0。大于1的值效果等同于100%。
如下图展示了，值为0%，50%， 100%，200%的效果。
opacity()透明
opacity()会向图片应用透明效果。该函数语法格式为opacity( <number-percentage>? )，接受一个值，值可以为数字或者百分比。0%表示完全透明，100%保持原样。初始值和默认值均为1。无效值或者负值均被视为1。大于1的值效果等同于100%。
该值与常用的CSS属性opacity类似，区别在于使用filter时，某些浏览器会开启硬件加速来保证性能。此外还可以在过滤器函数中指定多个opacity()，效果会产生叠加。
如下图展示了，值为0%，25%，两次50%， 50%， 100%，200%的效果。可以发现两次50%的效果会发生叠加，等价于25%的效果。
saturate()饱和度
saturate()可以改变图像色彩的饱和度。该函数的语法格式为saturate( <number-percentage>? )，接受一个值，值可以为数字或者百分比。0%表示完全不饱和，效果等同于greyscale(100%)完全灰度。100%表示保持原样。初始值和默认值均为1。无效值或者负值均被视为1。大于1则表示超饱和。
如下图展示了，值为0%，50%， 100%，200%的效果。
sepia()褐色化
sepia()可以将图像褐色化。该函数的语法格式为sepia( <number-percentage>? )，接受一个值，可以为数字或者百分比。0%表示保持原样，100%表示完全褐色化。初始值为0，但默认值为1。无效值或者负值均被视为1。大于1则等同于1。
如下图展示了，值为0%，50%， 100%，200%的情况。
结束语
以上我们介绍了CSS filter所预设的效果函数。本次我们先介绍这些内容，后续我还会给大家介绍下更为灵活复杂的SVG filter，敬请期待。
