CSS: cómo convertir una imagen en color a una imagen de color gris o negro/blanco

Question

Duplicar posible:
Convert an image to grayscale in HTML/CSS

¿Cómo puedo convertir una imagen en color I a un color gris o negro/imagen blanca como esta website con CSS?

¿Se puede hacer solo en CSS o necesito JavaScript (jQuery)?

Gracias.

Editar:

Gracias por las respuestas chicos. Observé que el truco consiste en crear dos imágenes de color diferentes: una es a todo color y la otra es b/n. Esperaba que esto se pudiera hacer en una sola imagen. Entonces, ¿no hay forma de hacerlo que no esté separado del 'truco'?

Answer 1

Para que se vea realmente bien id uso jQuery y desvanecimiento entre los dos echa un vistazo a este tutorial por Soh Tanaka. (Me parece que este sitio hizo una variación de este tutorial.)

Sin embargo, puede hacer esto con sólo CSS mediante la creación de un sprite de imagen y cambiar la posición de fondo sobre: ​​hover

Answer 2

En mi respuesta, yo soy direccionando solo a la imagen creación.

En su caso, sería mejor preprocesar manualmente las imágenes desaturadas utilizando Photoshop (etc.).

Si no desea preprocesar manualmente las imágenes desaturadas, le recomiendo usar PHP (o el lenguaje del lado del servidor que tenga) para hacerlo.

Si eso no es una opción, puede usar JavaScript para hacer que las imágenes no saturados, ver:

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

Answer 3

usted puede hacerlo usando lienzo: http://spyrestudios.com/html5-canvas-image-effects-black-white/

En IE que necesita algo así como ExplorerCanvas: http://excanvas.sourceforge.net/

Answer 4

también puede probar este jquery plugin greyScale

El efecto se puede hacer con una sola imagen.

EDITAR: Yo también recomiendo este Black and white jQuery plug in por Gianluca Guarini: Esto es más fácil de modificar css.