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

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 website with 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'??

谢谢你们的回答。我注意到制作两种不同颜色的图像的技巧——一种是全彩，另一种是b/w。我希望这能在一个图像中完成。所以，除了这个“诡计”之外，没有其他方法可以做到这一点吗?

4 个解决方案

#1

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.)

为了让它看起来很可爱，我使用jQuery，并在两个check out之间淡出。(我觉得这个网站对本教程做了一些改动。)

You can however do this with just css by creating an image sprite and changing the background position on :hover

不过，您可以通过创建一个图像精灵并更改:hover上的背景位置来实现这一点

#2

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 in by Gianluca Guarini : This is easier to modify css.

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

#3

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制作去饱和的图像，见:

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

#4

You can do it using canvas: http://spyrestudios.com/html5-canvas-image-effects-black-white/

您可以使用canvas: 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/这样的东西

#1