CSS3 -webkit-filter 滤镜使用方法

filter 浏览器支持情况

filter

*基本移动浏览器使用webkit内核的Android和iOS都已经支持。

filter 滤镜功能(请使用chrome和safari浏览)

原图
jobs

blur 模糊

-webkit-filter:blur(2px);

brightness 亮度

-webkit-filter:brightness(50%);

contrast 对比度

-webkit-filter:contrast(50%);

drop-shadow 阴影

-webkit-filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

opacity 透明度

-webkit-filter:opacity(50%);

grayscale 灰度

-webkit-filter:grayscale(80%);

sepia 褐色

-webkit-filter:sepia(100%);

invert 反色

-webkit-filter:invert(100%);

hue-rotate 色相旋转

-webkit-filter:hue-rotate(180deg);

saturate 饱和度

-webkit-filter:saturate(1000%);

filter 滤镜组合功能

-webkit-filter:contrast(80%) brightness(50%);

参考文章:
http://blog.wpjam.com/m/webkit-filter/
https://developer.mozilla.org/en-US/docs/Web/CSS/filter