filter 图片滤镜的各种设置

filter 图片滤镜 给当前元素加滤镜_改变它的明亮度

　　定义：filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。作用在图片上或元素上。div{ }，或 div img{ }结果是一样的。

1、 brightness()明亮度-->0-1 1为自己本身的两度

 div{
   -webkit-filter:brightness(.5)
  }

 div img{
     -webkit-filter:brightness(.5)
 }

2、grayscale()灰度 取值0-1

  div img{
             -webkit-filter:grayscale(.5)
         }

3、饱和度 是大于等于0的

 div img{
             -webkit-filter:saturate(1);/**/
         }

4、做旧，褐色

 div img{
             -webkit-filter:sepia(6);/**/
         }

5、色相旋转

 div img{
             -webkit-filter:hue-rotate(90deg);/**/
         }

6、反色 取值范围0-1

  div img{
             -webkit-filter:invert(1);/**/
         }

7、透明度

 div img{
     -webkit-filter:opacity(.2);/**/
 }

8、对比度 取值范围大于等于0

 div img{
             -webkit-filter:contrast(2);/**/
         }

9、模糊值 单位是像素

 div img{
             -webkit-filter:blur(50px);/**/
         }

10、阴影值 有四个属性值，x,y ,阴影模糊度，模糊的颜色

注：可以设置多个属性，之间用空格分隔。好多浏览器都不支持，比如IE，Google是支持的

可多个样式，之间用空格分隔。

 div img{
             -webkit-filter:drop-shadow(5px 5px 5px #ccc)
                                 blur(50px) contrast(2) ;/**/
         }