CSS：如何将彩色图像转换为灰色或黑白图像[重复]

Posted 2023-03-06

【中文标题】CSS：如何将彩色图像转换为灰色或黑白图像[重复]

【英文标题】：CSS: how to turn an colour image to a grey or black/white image [duplicate]

【发布时间】：2011-08-25 00:06:18

【问题描述】：

可能重复：Convert an image to grayscale in html/CSS

如何使用 CSS 将彩色图像转换为像 website 这样的灰色或黑白图像？

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

谢谢。

编辑：

谢谢大家的回答。我注意到诀窍是制作两张不同的彩色图像——一张是全彩色的，另一张是黑白的。我希望这可以在一张图片中完成。所以除了'trick'之外没有办法做到这一点？？

【参考方案1】：

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

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

【讨论】：

+1 for :hover，尽管如果您以这种方式加载大量图像，最好将它们分开保存以加快网站的初始加载速度，然后开始静默获取它们一旦页面加载。可能超出任何给定用户的需求范围。

是的，我也会做静默加载。

【参考方案2】：

你也可以试试这个jquery plugin greyScale

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

编辑：我还推荐 Gianluca Guarini 的 Black and white jQuery plug in： 这样修改css比较容易。

【参考方案3】：

在我的回答中，我只针对图像创作。

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

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

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

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

【讨论】：

+1 链接 - 实现起来非常简单。

是的，我喜欢插Pixastic，有些效果很不错：pixastic.com/lib/docs

【参考方案4】：

你可以使用画布来做到这一点：http://spyrestudios.com/html5-canvas-image-effects-black-white/

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