我一直喜欢灰度图像因为我认为他们看起来更有艺术感。很多图片编辑如photoshop很容易把你的彩色图像变成灰度。甚至有选择调整颜色深度和色调。不幸的是,这样的效果想做在网络上并不容易，因为浏览器有差异。
1、css filter
使用css过滤器属性可能是最简单的方法把图像变成灰度。以往,ie浏览器有一个专有的css属性称为过滤应用自定义效果包括灰度。
现在,过滤器属性是css3规范的一部分,并支持在一些浏览器,firefox、chrome和safari。以前,我们也提到webkit过滤器,它不仅将图像变成灰色也可以变成褐色和模糊效果。
添加如下css样式可以将图像变成灰色
img { -webkit-filter: grayscale(1);/* webkit */ filter:gray;/* ie6-9 */ filter: grayscale(1);/* w3c */ }
支持ie6-9和webkit浏览器(chrome 18+, safari 6.0+, and opera 15+)
(注意:这段代码在firefox上无效果。)
2、javascript
第二种方法是通过使用javascript技术上应该支持所有javascript的浏览器,包括ie6以下
代码来自ajax blender.
varimgobj = document.getelementbyid('js-image'); functiongray(imgobj) { varcanvas = document.createelement('canvas'); varcanvascontext = canvas.getcontext('2d'); varimgw = imgobj.width; varimgh = imgobj.height; canvas.width = imgw; canvas.height = imgh; canvascontext.drawimage(imgobj, 0, 0); varimgpixels = canvascontext.getimagedata(0, 0, imgw, imgh); for(vary = 0; y < imgpixels.height; y++){ for(varx = 0; x < imgpixels.width; x++){ vari = (y * 4) * imgpixels.width + x * 4; varavg = (imgpixels.data[i] + imgpixels.data[i + 1] + imgpixels.data[i + 2]) / 3; imgpixels.data[i] = avg; imgpixels.data[i + 1] = avg; imgpixels.data[i + 2] = avg; } } canvascontext.putimagedata(imgpixels, 0, 0, 0, 0, imgpixels.width, imgpixels.height); returncanvas.todataurl(); } imgobj.src = gray(imgobj);
3、svg
第三种方法来自svg filter.，你需要创建一个svg文件,并将以下代码写在里面，保存命名为***.svg

然后利用过滤器的属性，我们可以通过svg文件中的元素的id连接svg文件
img { filter:url('img/gray.svg#grayscale'); }
你也可以把它放到css文件中，例如：
img { filter:url('url(data:image/svg+xml;utf8,#grayscale);') }
总结
为了能过跨浏览器支持灰度的效果,我们可以把上述方法和一起使用下面的代码片段去实现。这段代码将支持firefox 3.5+, opera 15+, safari, chrome, and ie
img { -webkit-filter: grayscale(100%); -webkit-filter: grayscale(1); filter: grayscale(100%); filter:url('../img/gray.svg#grayscale'); filter:gray; }
我们可以利用上面的代码和javascript方法和只提供css滤波器作为后备以防javascript被禁用。这个想法可以很容易地modernizr的帮助下实现的。
.no-js img { -webkit-filter: grayscale(100%); -webkit-filter: grayscale(1); filter: grayscale(100%); filter:url('../img/gray.svg#grayscale'); filter:gray; }
ok了，你的浏览器上可以看到很炫的效果了！！