CSS Filter grayscale: I want it Black

Question

I am using the following css to convert my color images to grayscale.

img.desaturate{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(desaturate.svg#greyscale);
    filter: gray;
    -webkit-filter: grayscale(1);
}

BUT I want it Black (rgb(0,0,0) or #000000), and not grey. Is it possible?

Answer 1

Try using:

filter: brightness(0%);

Answer 2

I supose you want only black & white images, like a vector image or something, that's it? You could try playing with the saturate brightness and contrast filters:

filter: gray saturate(0%) brightness(70%) contrast(1000%);

Demo in jsfiddle (Demo only works in Webkit, I'm too lazy to write all vendor extensions :P)

Answer 3

I'm late to the party, but here's the best solution I found so far:

filter: brightness(0) invert(1);