图片滤镜效果效果(CSS3 filter)

CSS3 filter滤镜效果太强大了，不用不知道。有了它ps可以少做做了。

Filters主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上），不过我们在些只来讨论图片上的运用。

语法

      elm {
        filter: none | <filter-function > [ <filter-function> ]* 
      }      
    
其默认值是none，他不具备继承性，其中filter-function一个具有以下值可选：

grayscale灰度
sepia褐色（求专业指点翻译）
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影
更多参考w3cschool。。。

一个简单示例图片效果: 实现图片展示是带灰度，鼠标hover时展示原图效果。

.grayx img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;/* IE 6-9*/
transition: all .6s ease;
}
li:hover .grayx img, .grayx:hover img,.mouseHover.hover .grayx img{
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
－o-filter: grayscale(0%);
filter: grayscale(0%);
filter: none;
/* IE 6-9*/transition: all 1s ease;
}

参考文档：

https://www.w3cplus.com/css3/ten-effects-with-css3-filter

http://www.runoob.com/cssref/css3-pr-filter.html