javascript - CSS：如何将彩色图像转换为灰色或黑白图像

Question

可能重复：
在 HTML/CSS 中将图像转换为灰度

如何使用 CSS将彩色图像转换为像本网站一样的灰色或黑白图像？

可以仅在 CSS 上完成还是我需要 JavaScript (jQuery)？

谢谢。

编辑：

谢谢你们的答案。我注意到诀窍是制作两张不同颜色的图像——一张是全彩色的，另一张是黑白的。我希望这可以在一张图片中完成。所以没有办法做到这一点不是除了“把戏”吗？？

score 2 · Accepted Answer

你也可以试试这个jquery 插件 grayScale

效果可以用一张图片完成。

编辑：我还推荐Gianluca Guarini 的这个黑白 jQuery 插件：这更容易修改 css。

score 2 · Accepted Answer

为了让它看起来真的很可爱，请使用 jQuery 并在两者之间淡入淡出，请查看Soh Tanaka的本教程。（我看起来这个网站做了本教程的变体。）

但是，您可以通过创建图像精灵并更改 :hover 上的背景位置来仅使用 css 执行此操作

score 1 · Accepted Answer

在我的回答中，我只解决图像创建问题。

在您的情况下，您最好使用 Photoshop（等）手动预渲染去饱和图像。

如果您不想手动预渲染去饱和图像，我建议您使用 PHP（或您拥有的任何服务器端语言）来执行此操作。

如果这不是一个选项，您可以使用 JavaScript 制作去饱和图像，请参阅：

score 1 · Accepted Answer

在 IE 中，您需要类似 ExplorerCanvas：http ://excanvas.sourceforge.net/

4 回答 4