Visualizza wikitesto di Convertire le immagini in bianco e nero in CSS

[[GENERALE#CSS|&larr; CSS]] [[Category:CSS]]

Estratto da: https://devdev.it/convertire-le-immagini-in-bianco-e-nero-in-css-51/

Togliere la saturazione ad un’immagine è operazione molto semplice con il giusto filtro CSS. Per applicarlo applichiamo all’immagine una regola come questa:

<pre>
img.biancoenero {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%);
    filter: gray; /* Fix per Explorer */
}
</pre>

Da quali browser è supportata questo effetto? Secondo i dati di caniuse.com, Chrome, Firefox, Safari, Opera, iOS e Android sia desktop che mobile supportano a pieno il filtro, mentre Internet Explorer e Microsoft Edge possono avere qualche problema. Vediamo come aggirare il problema usando un filtro SVG....