css实现图片灰度效果就是通过css样式让彩色图片呈现为灰色，相当于把一张图像的颜色模式调整为灰度，css可以通过以下几种方法来实现灰度效果。
方式1. ie滤镜
img { filter: progid:dximagetransform.microsoft.basicimage(grayscale=1); } //标准写法img { filter:gray; } //简写
ie系列浏览器都支持ie滤镜的这一属性，非ie浏览器不支持。
方式2. css3滤镜
img { -webkit-filter: grayscale(100%); }
css3滤镜目前还不属于标准属性，现在暂时只有google chrome浏览器支持，其他浏览器均不支持
css实现灰度效果可以让网页更加容易实现一些特效，还记得纪念5.12大地震国内很多网页在一夜之间全部变成灰色吗？给网站加上下面的样式就可以轻松实现：
html { filter:gray; -webkit-filter: grayscale(100%); }
有人肯定要说了css实现灰度效果虽好，但不能做到兼容全部浏览器呀，怎么办呢？css做不到的事情，大家肯定会想到用js来实现，下面给大家推荐一款js灰度效果插件：
grayscale.js
使用方法：
//引入插件<script type="text/javascript" src="grayscale.js"></script>
//调用插件<script type="text/javascript"> window.onload = function(){ var el = document.getelementbyid( 'body' ); grayscale( el ); };</script>
兼容所有浏览器，执行后会在元素上加入很多行内样式，如果你对兼容性要求不高的话建议使用css实现灰度效果。