-webkit-filter

-webkit-filter：CSS滤镜属性。可以在元素呈现之前，为元素渲染提供效果。常用于图像、背景、边框的渲染。

语法：

 

ele{ -webkit-filter: none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() | 　　　　　　　　　　　　saturate() | sepia() | drop-shadow( radius )| url(); /*chrome, safari, opera*/ filter: none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() | 　　　　　　　　　　　　saturate() | sepia() | drop-shadow( radius )| url(); }

其默认值为none，不能继承，其JavaScript语法为：object.style.WebkitFilter = " ";

注：IE不支持filter。

可选值：

none，默认值，无效果。blur(px)，高斯模糊。brightness(%)，亮度。contrast(%)，对比度。grayscale(%)，灰度。hue-rotate(%)，色相旋转。invert(%)，反色。opacity(%)，透明度。saturate(%)，饱和度。sepia(%)，褐色。drop-shadow(radius)，阴影。url()，URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

简单效果：

　　原图

　　

　　◊ blur()   5px模糊程度

img{ -webkit-filter: blur(5px); filter: blur(5px); }

　　　　

　　◊ brightness()  180%亮度

img{ -webkit-filter: brightness(180%); filter: brightness(180%); }

　　　    　

      ◊ contrast()  200%对比度

img{ -webkit-filter: contrast(200%); filter: contrast(200%); }

　　　　

　　◊ grayscale()  100%灰度

img{ -webkit-filter: grayscale(100%); filter: grayscale(100%); }

　　　　

　　◊ hue-rotate()   180deg 色相旋转

img{ -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); }

　　　　

　　◊ invert()  100%反色

img{ -webkit-filter: invert(100%); filter: invert(100%); }

　　　　

　　◊ opacity()  50%透明度

img{ -webkit-filter: opacity(50%); filter: opacity(50%); }

　　　　

　　◊ saturate()  200%饱和度

img{ -webkit-filter: saturate(200%); filter: saturate(200%); }

　　　　

　　◊ sepia()  100%褐色

img{ -webkit-filter: sepia(100%); filter: sepia(100%); }

　　　　

　　◊ drop-shadow()  阴影

img{ -webkit-filter: drop-shadow(10px 10px 15px green); filter: drop-shadow(10px 10px 15px green); }