认识CSS(九):CSS滤镜特效

滤镜特效
在影像处理软件中，我们常会用滤镜(filter)为影像加上各种不同的效果。CSS filter滤镜效果是类似像photoshop影像处理软件所提供的功能。透过CSS filter滤镜效果，我们可以对网页元素进行设定，达到特殊结果。

CSS Filters滤镜效果，有以下几种常用特效，分别是：

grayscale灰阶处理
grayscale表示灰阶比例，可以将网页影像转化成黑白。括号里可以使用0% 到100%的百分比控制、也可以使用0至1的数字控制。0表示和原图相同，1和100%则是没有任何色彩的黑白影像。
blur模糊处理
类似像相片失焦的效果、括号里要设定模糊的程度。数字越大，图形越模糊，设定时要记得加上单位。例如：blur(10px)。
sepia怀旧复古风
影像会呈现老相片的效果，在影像上叠上一层深褐色。复古效果的比例0表示和原图相同，1和100%则让影像转变成只有褐色的单色影像，呈现复古风。
saturate调整饱和度
调整影像的饱和度、可以让影像看来更鲜艳。1和100%表示和原图相同，颜色不变；小於1和100%是降低饱和度；大於1和100%则是增加饱和度。
contrast调整对比
对比比例。1或100%表示和原图相同，小於1表示增加对比，大於1则是减少对比。