可能重复：
Convert an image to grayscale in HTML/CSSCSS：如何将彩色图像变成灰色或黑色/白色图像
我怎样才能把一个彩色图像转换为灰色或黑色/像这样的website与CSS的白色图像？
它可以完成CSS或我需要JavaScript（jQuery）吗？
谢谢。
编辑：
感谢您的答案家伙。我注意到诀窍是制作两种不同的彩色图像 - 一种是全彩色，另一种是黑白。我希望这可以在一个单一的形象。所以没有办法做到这一点，除了'技巧'？
为了让它看起来非常甜蜜，请使用jQuery和两者之间的淡入淡出本教程Soh Tanaka。 （我看起来像这样的网站做了这个教程的变化。）
但是，您可以只通过创建图像精灵和改变的背景位置CSS这样做的：hover
在我的答案，我只处理图像创建。
在你的情况，你会更好地使用Photoshop（等）手动预渲染去饱和的图像。
如果您不想手动预先渲染去饱和图像，我建议使用PHP（或任何服务器端语言）来执行此操作。
如果这不是一个选项，您可以用JavaScript来让去饱和图像，请参阅：http://spyrestudios.com/html5-canvas-image-effects-black-white/
在IE浏览器，你会需要这样的东西：
您可以用帆布做ExplorerCanvas：http://excanvas.sourceforge.net/
你也可以试试这个jquery plugin greyScale
可以使用单个图像完成该效果。
编辑：我也建议这个Black and white jQuery plug in Gianluca Guarini： 这是更容易修改的CSS。
+1：悬停，尽管如果您以这种方式加载大量图片，最好将它们分开放置以加快网站的初始加载速度，然后在页面加载后以静默方式启动它们。可能超出了任何用户需求的范围。 – 2011-05-13 14:34:52
是的沉默加载是我会做的。 – locrizak 2011-05-13 14:37:37