How to completely gray out an image with css?

Question

I have this image: enter image description here .

I need to gray it out to look like this: enter image description here .

Using the response in this SO question: Gray out image with CSS?

 opacity : 0.4;
 filter: alpha(opacity=40); /* msie */

I get this: enter image description here

Setting the filter property to filter: grayscale(100%) still leaves changes in the colors: enter image description here

Anyway I can make it completely gray?

score 1 · Accepted Answer · answered Jan 04 '13 at 14:38

1

It sounds like you are trying to change the actual pixels in an image. I believe what you are looking for is something like.

Pixastic (coloradjust)

or PaintbrushJS (colour tint)

answered Jan 04 '13 at 14:38

nate_weldon

nate_weldon, PaintBrushJS did the trick with colour tint, but it only works on page loads. Do you know how I can change it programmatically after page loads (with a mouse click)? – TheOne Jan 05 '13 at 19:49

score 1 · Answer 2 · answered Jan 04 '13 at 14:38

You won't be able to do this with CSS. You need to process the image first in one way or another to get a solid gray where gradients are removed.

The better approach is to make a version of it as you want it and then using css/js replace the color version with the processed version.

The other option is to process it using the canvas and convolutions or go by pixel by pixel.

Pixel approach is not the fastest kid on the block however:
http://www.onaluf.org/en/entry/13

But perhaps processing it by using various techniques can give you what're after:
http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

That second link is pretty awesome. – TheOne Jan 05 '13 at 16:34 — TheOne, Jan 05 '13 at 16:34

2 Answers2