internet explorer 10 - come applicare il filtro in scala di grigi?

Questo codice CSS funziona abbastanza bello per Internet Explorer fino a 9.internet explorer 10 - come applicare il filtro in scala di grigi?

img.gray { 
    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"); 
    filter: gray; 
    -webkit-filter: grayscale(1); 
}

Ma che cosa devo fare per Internet Explorer 10?

fonte

2013-02-11 jellobird

IE10 does not support DX filters come IE9 e precedenti hanno fatto, né supporta una versione prefissata del filtro in scala di grigi.

Tuttavia, è possibile utilizzare una sovrapposizione SVG in IE10 per eseguire il greyscaling. Esempio:

img.grayscale:hover { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 
} 

svg { 
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg); 
}

(da: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)

semplificato JSFiddle: http://jsfiddle.net/KatieK/qhU7d/2/

più sugli IE10 SVG effetti filtro: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

fonte

2013-02-11 18:59:57 KatieK

grazie per questo consiglio – jellobird

Non c'è modo di raggiungere questo senza fare riferimento all'URL dell'immagine nel CSS? Sto cercando di farlo funzionare su una pagina con più immagini, quindi suppongo che potrei aggiungere ogni immagine ai CSS nello

... Abbastanza un faff ma poi è IE! – patrickzdb

Dovresti chiederlo come una domanda nuova di zecca. Includi un link qui, ma assicurati di avere un codice di esempio (nel Q e in un jsFiddle) in modo che qualcuno possa capire a cosa miri. Sono confuso su come ti aspetteresti di fare riferimento all'immagine, senza usare il suo URL. – KatieK

usare questo plugin jQuery https://gianlucaguarini.github.io/jQuery.BlackAndWhite/

Quello sembra essere l'unica soluzione cross-browser. Inoltre ha un effetto di dissolvenza e dissolvenza gradevole.

fonte

2013-11-23 20:31:33 Corni

Sembra che le persone abbiano fatto downvoting perché il link non funziona più ed erano troppo pigri per cercarlo. Quindi, ecco un nuovo link: https://gianlucaguarini.github.io/jQuery.BlackAndWhite/ – Sygmoral

Grazie! Ho aggiornato il mio post originale. – Corni

Inline SVG può essere utilizzato in Internet Explorer 10 e 11 ed Edge 12.

Ho creato un progetto chiamato grigia che include un polyfill per questi browser. Il polyfill passa fuori <img> tag con linea SVG: https://github.com/karlhorky/gray

da implementare, la versione breve è quello di scaricare il plugin jQuery al link GitHub sopra e aggiungere dopo jQuery alla fine del tuo corpo:

<script src="/js/jquery.gray.min.js"></script>

Quindi ogni immagine con la classe grayscale verrà visualizzata in grigio.

<img src="/img/color.jpg" class="grayscale">

Puoi anche see a demo se lo desideri.

fonte

2014-02-12 22:28:00

Questo in effetti è il miglior plug-in JS in scala di grigi che ho trovato e ho provato circa 5, buon lavoro! –

Cheers, felice che abbia aiutato! –

Fin dal 2015, ** grazie **! Questo plugin è un salvavita, sto navigando in internet da due giorni alla ricerca di questo tipo di soluzione. * Grazie! * – Singular1ty

internet explorer 10 - come applicare il filtro in scala di grigi?

risposta

Problemi correlati