CSS filter - 滤镜效果 - WangYu's Notebook

最近在读《CSS 揭秘》这本书，书中提到了 CSS3 中的 filter 属性，看了看 w3.org 上 Filter Effects Module Level 1 后，来谈谈这个属性，下面结合例子来说说该如何使用该属性。

基本语法

filter 属性可以用在任何元素上，并非只能用在图片上。该属性的基本语法如下：

filter: none | [ <filter-function> | <url> ]+ ;

这里的 none 表示不添加滤镜效果，而 filter-function 则是指某种滤镜效果，比如模糊（blur）、反色（invert），目前可选的滤镜效果有下面这些：

另外还可以使用 url 来加载一个 SVG，使用 SVG 中的 <filter> 来作为滤镜，但这个不在今天的讨论范围中。

下面对各个滤镜的使用方法进行说明，每个滤镜都配合了一个示例，可以拖动滑块来观察效果。

接受一个长度值作为参数，用来指定模糊半径，不接受百分比，不接受负值，默认值为 0。

filter: blur(10px);

调节亮度，接受一个百分数作为参数，用来指定亮度。0% 让其表现为完全黑色，100% 让其保持原样，超过 100% 让其变亮。

filter: brightness(50%);

调节对比度，接受一个百分数作为参数，用来指定对比度。0% 让其表现为完全灰色，100% 让其保持原样，超出 100% 让其对比度增强。

filter: contrast(50%);

该函数和 box-shadow 有些相近都能给元素添加投影，不同的是不包含扩张距离，也不支持 inset 关键字，且只能应用一组值。

使用方法如下：

filter: drop-shadow(4px 4px 3px #333);

三个长度值和 box-shadow 的前三个长度值相同，分别表示横向偏移量、纵向偏移量、模糊距离。颜色值当然是指模糊的颜色了。注意：这里滤镜效果虽然像是函数，但是其参数值是不能用逗号隔开的。

转为灰度图效果，接受一个百分比作为参数，0% 表示没有灰度效果，100% 完全变为灰度图。

filter: grayscale(50%);

知道 HSL 色系的同学应该明白这里的 H 就表示 hue（色度），这个值的有效范围为 0deg~360deg，超出 360deg 的会使用 360 取余。默认值为 0deg。

filter: hue-rotate(50deg);

反色处理，接受一个介于 0% 至 100% 的百分比作为参数，表示反色的程度，0 表示不反色，100% 表示完全反色。

filter: invert(50%);

调节透明度，接受一个介于 0% 至 100% 的百分比作为参数，0% 表示完全透明，100% 表示没有透明效果（维持原样）。opacity 这个单词的意思是 不透明 ，不要搞错了。

filter: opacity(50%);

saturate（vt. 使饱和; adj. 饱和的），调节饱和度。接受一个百分比作为参数，0% 表示完全不饱和，100% 表示保持原样，超出 100% 表示过饱和。不允许负值。

filter: saturate(50%);

将输入内容变为黄褐色，效果就像是泛黄的老照片，我称其为复古。接受一个介于 0% 至 100% 的百分比作为参数，0% 表示不变，100% 表示完全变为黄褐色。

filter: sepia(50%);

filter 属性可以接受多组滤镜效果，比如复古之后再模糊，可以这样写：

filter: sepia(50%) blur(2px);