一行代码实现网页变灰

清明已过,谷雨未来。

原图

一行代码变灰术：

灰质图片

     -webkit-filter: grayscale(1)

就这么顺利的完成了，就是给加了上面的样式而已。这里用到的是css3的滤镜，那我们顺便看看滤镜的其他用法吧！

-webkit-fiter是css3的一个属性

支持它的浏览器

嗯，对，IE不支持。当然IE有它自己的实现滤镜的方法，我们今天先不做研究。

灰度：

grayscale()： 值取0~1，上边提到的就是这个。

对比度：

contrast(): 取值0~1：值为0时全黑，值为1时图像不变

-webkit-filter: contrast(26%)

亮度：

brightness()

取值为0时全黑，1时无变化，大于1开始增亮

-webkit-filter: brightness(26%)

取值为0：

-webkit-filter: brightness(0)

变成200试试：

webkit-filter: brightness(200%)

饱和度：

saturate()

取值为0完全不饱和，取值为1无变化

完全不饱和

       -webkit-filter: saturate(0); 

褐色：

Sepia() : 取值为0~1 ,取0时图像无变化，取1时变为全褐色。

       -webkit-filter: sepia(100%); 

模糊

blur(px)

值越大越模糊

高斯模糊

耶？我眼镜儿呢？这个海绵宝宝我看不清楚了，真是高斯模糊.

       -webkit-filter: blur(3px); 

透明度

opacity():取值0到1之间,值越小越透明，取值为0时全透明。

    -webkit-filter: opacity(20%);

反色：

invert()

      -webkit-filter: invert(100%); 

令人瑟瑟发抖的海绵宝宝，额，为什么海绵宝宝变成了蓝色,难不成它在海里生活太久了?看下图就明白了:

阴影效果:

drop-shadow(h-shadow v-shadow blur spread color)

前两个参数表示阴影偏移量,第一个是水平方向,正数向左,负数向右.第二个参数是竖直方向:正数向下,负数向上.第三个变量控制阴影边框的模糊度,越大越模糊,为0的时候最尖锐.第四个参数就是阴影的颜色了.

        -webkit-filter:drop-shadow(10px  10px 10px #000 ) ;