-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);
     }