CSS3滤镜实现图片不同渲染效果例子
本站在首页文章封面图从无色转变为有色，以及页面切换、发布留言等信息提示的背景模糊都利用到了css3的filter滤镜。CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜，一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。目前有grayscale、blur、invert、saturate等10个filter-function。filter属性目前支持的浏览器较少，chrome，Firefox基本都支持了，IE只有EDGE(这个算IE吗)部分支持。具体兼容性请自行测试一下。这里的Demo在chrome（47.0.2526.80），Firefox（43）上测试通过。：
filter主要用于图片，SVG等元素上，其默认值是none，有以下10个filter-function值可选：
grayscale（灰度）效果类似于PS中的去色或者黑白
blur（模糊）效果类似于PS中的高斯模糊
invert（反相）效果类似于PS中的反相
opacity（透明度）效果类似于PS中的图层不透明度
saturate（饱和度）效果类似于PS中的饱和度
brightness（亮度）效果类似于PS中的亮度
contrast（对比度）效果类似于PS中的对比度
drop-shadow（阴影）效果类似于PS中的投影
sepia（怀旧）效果类似于相机中的老照片滤镜
hue-rotate（色相）效果类似于PS中的色相 旋转（不知道怎么说）
grayscale（灰度）
.filter-grayscale{
-webkit-filter : grayscale(1);
filter : grayscale(1);
}
blur（模糊）
.filter-blur{
-webkit-filter : blur(3px);
filter : blur(3px);
}
invert（反相）
.filter-invert{
-webkit-filter : invert(1);
opacity（透明度）
.filter-opacity{
-webkit-filter : opacity(.3);
filter : opacity(.3);
}
saturate（饱和度）
.filter-saturate{
-webkit-filter : saturate(.3);
filter : saturate(.3);
}
brightness（亮度）
.filter-brightness{
-webkit-filter : brightness(.3);
filter : brightness(.3);
}
contrast（对比度）
.filter-contrast{
-webkit-filter : contrast(3);
filter : contrast(3);
}
drop-shadow（阴影）
.filter-drop-shadow{
-webkit-filter : drop-shadow(5px 3px 7px #888);
filter : drop-shadow(5px 3px 7px #888);
}
sepia（怀旧）
.filter-sepia{
-webkit-filter : sepia(1);
filter : sepia(1);
}
hue-rotate（色相）
.filter-hue-rotate{
-webkit-filter : hue-rotate(135deg);
filter : hue-rotate(135deg);
}
您可能感兴趣的文章：
CSS3滤镜实现图片不同渲染效果例子
photoshop树滤镜使用技巧心得分享
css中-webkit-box-reflect属性简介及元素镜像倒影实现
photoshop利用滤镜制作亚麻背景图教程
如何将 HTML5 性能发挥到极致
CSS 滤镜效果：模糊、灰度、亮度等
JavaScript实现页面截图的类库 html2canvas
photoshop利用分层云彩快速制作闪电效果教程
IE7,IE8浏览器CSS实现正圆角效果代码
CSS制作11种风格不同的特效文字