可能的重复：
将图像转换为 HTML/CSS 中的灰度
我怎样才能使用 CSS 将彩色图像转换为灰色或黑白图像，例如 网站？
可以仅通过 CSS 完成还是需要 JavaScript (jQuery)？
谢谢。
编辑：
感谢大家的回答。我注意到诀窍是制作两个不同的彩色图像 - 一个是全彩，另一个是黑白。我希望这可以在一张图像中完成。那么除了“技巧”之外就没有办法做到这一点吗？
Possible Duplicate:
Convert an image to grayscale in HTML/CSS
How can I turn an colour image to a grey or black/white image like this website with CSS?
Can it be done solely on CSS or do I need JavaScript (jQuery)?
Thanks.
Edit:
Thanks for the answers guys. I notice that the trick is to make two different colour images - one is full colour and the other is b/w. I was hoping this can be done in one single image. So there is no way to do that isn't apart from the 'trick'??
发布评论
评论（4）
为了使它看起来非常甜蜜，我使用 jQuery 并在两者之间淡入淡出，请查看 田中宗。 （我看起来这个网站做了本教程的变体。）
但是，您可以通过创建图像精灵并更改 :hover 上的背景位置，仅使用 css 来完成此操作
To make it look really sweet id use jQuery and fade between the two check out this tutorial by Soh Tanaka. (I looks like this site did a variation of this tutorial.)
You can however do this with just css by creating an image sprite and changing the background position on :hover
你也可以试试这个jquery插件greyScale的
效果可以用一张图像来完成。
编辑：我还推荐 Gianluca Guarini 的黑白 jQuery 插件 ：
这样修改css就更容易了。
You can also try this jquery plugin greyScale
The effect can be done with one single image.
EDIT : I recommend also this Black and white jQuery plug in by Gianluca Guarini :
This is easier to modify css.
在我的回答中，我只讨论图像的创建。
对于您的情况，您最好使用 Photoshop（等）手动预渲染去饱和图像。
如果您不想手动预渲染去饱和图像，我建议使用 PHP（或您拥有的任何服务器端语言）来执行此操作。
如果这不是一个选项，您可以使用 JavaScript 来制作去饱和图像，请参阅：
http:// /www.pixastic.com/lib/docs/actions/desaturate/
In my answer, I'm addressing only the image creation.
In your case, you'd be better manually pre-rendering the desaturated images using Photoshop (etc).
If you don't want to manually pre-render the desaturated images, I'd recommend using PHP (or whatever server-side language you have) to do it.
If that's not an option, you can use JavaScript to make desaturated images, see:
http://www.pixastic.com/lib/docs/actions/desaturate/
您可以使用画布来完成此操作： http://spyrestudios.com/html5-canvas -image-effects-black-white/
在 IE 中，您需要类似 ExplorerCanvas 的东西： http://excanvas .sourceforge.net/
You can do it using canvas: http://spyrestudios.com/html5-canvas-image-effects-black-white/
In IE you'll need something like ExplorerCanvas: http://excanvas.sourceforge.net/