CSS: Bilder ausgrauen

Jeder hat bestimmt schon einmal versucht seine normalen Bilder auf der Webseite auszugrauen. Genau mit diesem Problem wurde ich kürzlich auch konfrontiert.

Nach einem kurzem Meeting mit Google und ca 25 Tausend verschiedenen Möglichkeiten (jQuery, reines JS, etc), bin ich über mehrere Möglichkeiten gestoßen die es per CSS machen und hab sozusagen das beste von allen genommen:

.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

Leider habe ich noch keine Möglichkeit gefunden, diesen Filter auch im IE10 zu verwenden. Wenn jemand weiß wie es geht kann er sich ja gerne in den Kommentaren melden.

Kommentar verfassen