巧用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）上测试通过。先来看一下http://caniuse.com/的兼容性评测：

filter 兼容性

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中的色相+旋转（不知道怎么说）

DEMO

GRAYSCALE（灰度）

.filter-grayscale{
     -webkit-filter : grayscale(1);
     filter : grayscale(1);
}

grayscale

BLUR（模糊）

.filter-blur{
     -webkit-filter : blur(3px);
      filter : blur(3px);
}

blur

INVERT（反相）

.filter-invert{
    -webkit-filter : invert(1);
    filter : invert(1);
}

invert

OPACITY（透明度）

.filter-opacity{
     -webkit-filter : opacity(.3);
     filter : opacity(.3);
}

opacity

SATURATE（饱和度）

.filter-saturate{
     -webkit-filter : saturate(.3);
     filter : saturate(.3);
}

saturate

BRIGHTNESS（亮度）

.filter-brightness{
    -webkit-filter : brightness(.3);
    filter : brightness(.3);
}

brightness

CONTRAST（对比度）

.filter-contrast{
    -webkit-filter : contrast(3);
    filter : contrast(3);
}

contrast

DROP-SHADOW（阴影）

.filter-drop-shadow{
    -webkit-filter : drop-shadow(5px 3px 7px #888);
    filter : drop-shadow(5px 3px 7px #888);
}

drop-shadow

SEPIA（怀旧）

.filter-sepia{
    -webkit-filter : sepia(1);
     filter : sepia(1);
}

sepia

HUE-ROTATE（色相）

.filter-hue-rotate{
    -webkit-filter : hue-rotate(135deg);
    filter : hue-rotate(135deg);
}

hue-rotate

DEMO