CSS3属性之——filter

filter作为CSS3的属性，是作为滤镜效果出现的，主要功能是对图片进行一些处理，当然还可以对video进行作用，我们这里暂且只讨论对图片的处理效果。 看到图片处理。我们是否会联想到一系列其他的处理方式呢？PhotoShop?用MATLAB进行图像处理？不错，filter一词的确与MATLAB中的filter作用相同，但是使用方法不尽相同。​接下来我们一起来看看都可以怎样实现不同的效果。

首先我们新建一个html文档，（我用的是sublime text 编码器）为了方便起见，我们采用在html文档中使用style标签直接嵌入CSS样式的方式。​​为了进行效果比较，我们插入两张一样的图片，大小设置为100px。第二章图片作为效果图使用，将其class设置为pic。效果如图显示​​

考虑到浏览器的兼容性，我们使用IE 9.0及以上版本或者使用Chrome18.0.97及以上版本。这里我使用的是IE9.0版本，接下来我们看插入效果图。​

然后进入我们的效果编码效果展示部分：

一、grayscale特效，grayscale的作用是把图片变成黑白图。​

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:grayscale(1);​（-webkit-作用是处理浏览器兼容性）效果如图所示​

grayscale特效

二、sepia特效，sepia的作用是把图片变成褐色，产生复古效果。​

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:sepia(1);​效果如图所示​​

  sepia特效

三、saturate特效，saturate的作用还是设置更改图片的饱和度，可根据自己对图片饱和度的要求任意设置。这里设置为5，

在style中给.pic设置属性，写入这样一行代码：--webkit-filter:saturate(5)；

效果如图所示​​​​

saturate特效

四、hue-rotate特效，saturate的作用是改变色相，属性值为角度，默认值。0deg

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:hue-rotate(90deg);效果如图所示​​

hue-rotate特效

五、opacity特效，opacity的作用是设置改变图片的透明度，默认值100%。

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:opacity(.1);效果如图所示​​

opacity特效

六、invert特效，invert的作用效果和相机底片一样，进行反色,默认值100%。​​

invert特效

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:invert(1);效果如图所示​

七、brightness特效，brightne的作用是改变设置图片的亮度，默认值100%。

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:brightness(.5);效果如图所示​​​​​​​​

  brightness特效  

八、contrast特效，contrast的作用是改变设置图片的对比度，默认值100%。​​

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:contrast(2);效果如图所示​​​​​​​​

contrast特效

九、blur特效，blur的作用是改变图片的清晰度，默认值为0。​

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:blur(2px);效果如图所示​​

blur特效  

十、drop-shadow特效，drop-shadow的作用是产生阴影。​

在style中给.pic设置属性，写入这样一行代码：-webkit-filter:drop-shadow(2px);效果如图所示​​

drop-shadow特效  

当然根据需要可以同时使用两种或几种特效达到最好的效果。