【发布时间】：2011-08-25 00:06:18
【问题描述】：
如何使用 CSS 将彩色图像转换为像 website 这样的灰色或黑白图像？
可以仅在 CSS 上完成还是我需要 JavaScript (jQuery)？
谢谢。
编辑：
谢谢大家的回答。我注意到诀窍是制作两张不同的彩色图像——一张是全彩色的，另一张是黑白的。我希望这可以在一张图片中完成。所以除了'trick'之外没有办法做到这一点？？
【问题讨论】：
标签： javascript jquery css grayscale
【发布时间】：2011-08-25 00:06:18
【问题描述】：
要让它看起来真的很可爱，请使用 jQuery 并在两者之间淡入淡出，查看Soh Tanaka 的本教程。 （我看起来这个网站对本教程做了一个变体。）
但是，您可以通过创建图像精灵并更改 :hover 上的背景位置来仅使用 css 完成此操作
【讨论】：
-
+1 for :hover，尽管如果您以这种方式加载大量图像，最好将它们分开保存以加快网站的初始加载速度，然后开始静默获取它们一旦页面加载。可能超出任何给定用户的需求范围。
-
是的，我也会做静默加载。
你也可以试试这个jquery plugin greyScale
效果可以用一张图片完成。
编辑：我还推荐 Gianluca Guarini 的 Black and white jQuery plug in： 这样修改css比较容易。
【讨论】：
在我的回答中，我只针对图像创作。
在您的情况下，您最好使用 Photoshop（等）手动预渲染去饱和图像。
如果您不想手动预渲染去饱和图像，我建议您使用 PHP（或您拥有的任何服务器端语言）来执行此操作。
如果这不是一个选项，您可以使用 JavaScript 制作去饱和图像，请参阅：
【讨论】：
-
+1 链接 - 实现起来非常简单。
-
是的，我喜欢插Pixastic，有些效果很不错：pixastic.com/lib/docs
你可以使用画布来做到这一点：http://spyrestudios.com/html5-canvas-image-effects-black-white/
在 IE 中你需要类似 ExplorerCanvas 的东西：http://excanvas.sourceforge.net/
【讨论】：