javascript CSS：如何将彩色图像转换为灰色或黑白图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5993406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: how to turn an colour image to a grey or black/white image
提问by laukok
Possible Duplicate:
Convert an image to grayscale in HTML/CSS
可能的重复：
在 HTML/CSS 中将图像转换为灰度
How can I turn an colour image to a grey or black/white image like this websitewith CSS?
如何使用 CSS将彩色图像转换为灰色或黑色/白色图像，例如本网站？
Can it be done solely on CSS or do I need JavaScript (jQuery)?
它可以仅在 CSS 上完成还是我需要 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'??
谢谢各位的回答。我注意到诀窍是制作两个不同的彩色图像 - 一个是全彩色的，另一个是黑白的。我希望这可以在一张图片中完成。所以除了“诡计”之外，没有办法做到这一点？
回答by locrizak
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.)
为了让它看起来非常甜美 id 使用 jQuery 并在两者之间淡入淡出，请查看Soh Tanaka 的本教程。（我看起来这个网站做了本教程的变体。）
You can however do this with just css by creating an image sprite and changing the background position on :hover
但是，您可以通过创建图像精灵并更改 :hover 上的背景位置来仅使用 css 来完成此操作
回答by Sébastien Gicquel
You can also try this jquery plugin greyScale
你也可以试试这个jquery插件greyScale
The effect can be done with one single image.
这种效果可以用一张图像来完成。
EDIT : I recommend also this Black and white jQuery plug inby Gianluca Guarini : This is easier to modify css.
编辑：我还推荐Gianluca Guarini 的这个黑白 jQuery 插件：这更容易修改 css。
回答by thirtydot
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).
在您的情况下，您最好使用 Photoshop（等）手动预渲染不饱和的图像。
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.
如果您不想手动预渲染去饱和图像，我建议您使用 PHP（或您拥有的任何服务器端语言）来执行此操作。
If that's not an option, you can use JavaScript to make desaturated images, see:
如果这不是一个选项，您可以使用 JavaScript 制作去饱和图像，请参阅：
回答by Nathan
You can do it using canvas: http://spyrestudios.com/html5-canvas-image-effects-black-white/
您可以使用画布：http: //spyrestudios.com/html5-canvas-image-effects-black-white/
In IE you'll need something like ExplorerCanvas: http://excanvas.sourceforge.net/
在 IE 中，你需要像 ExplorerCanvas 这样的东西：http: //excanvas.sourceforge.net/
