跨浏览器Html页面及图像灰度(grayscale)

meta标签规范

使用W3c CSS filter方式的grayscale实现Html页面及图像灰度

CSS3中借鉴IE私有滤镜的方式提供了标准的CSS Filter方案，支持grayscale灰度、sepia褐色、saturate饱和度、hue-rotate色相旋转、invert反色、opacity透明度、brightness亮度、contrast对比度、blur模糊、drop-shadow阴影等十种效果。

实现grayscale灰度Html页面及图像的代码：

gray-filter {
 -webkit-filter: grayscale(100%);    /* webkit内核支持程度较好 */
    -moz-filter: grayscale(100%);    /* 其他内核现在并不支持，为了将来兼容性书写 */
     -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
         filter: grayscale(100%);    /* 标准写法 */
}