CSS:如何将彩色图像转换为灰色或黑/白图像

CSS: how to turn an colour image to a grey or black/white image

本文关键字：白图像图像灰色彩色图像转换 CSS 更新时间：2023-09-26

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

如何使用CSS将彩色图像转换为灰色或黑/白图像，例如本网站？

它可以只在CSS上完成还是我需要JavaScript（jQuery）？

谢谢。

编辑：

谢谢你们的回答。我注意到诀窍是制作两种不同的彩色图像 - 一种是全彩色的，另一种是黑白的。我希望这可以在一张图像中完成。所以没有办法做到这一点，除了"技巧"？？

为了让它看起来非常甜蜜的id，请使用jQuery并在两者之间淡入淡出，请查看Soh Tanaka的本教程。（我看起来这个网站做了本教程的变体。

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

你也可以

试试这个jquery插件灰度

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

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

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

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

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

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

http://www.pixastic.com/lib/docs/actions/desaturate/

您可以使用 canvas： http://spyrestudios.com/html5-canvas-image-effects-black-white/

在IE中，你需要类似ExplorerCanvas的东西：http://excanvas.sourceforge.net/