web-dev-qa-db-fra.com

Internet Explorer 10 - comment appliquer un filtre en niveaux de gris?

Ce code CSS fonctionne plutôt bien pour Internet Explorer jusqu’à 9 ans.

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);
}

Mais que dois-je faire pour Internet Explorer 10?

internet-explorercss3internet-explorer-10
36
jellobird

IE10 ne prend pas en charge les filtres DX comme l'ont déjà fait IE9 et les versions antérieures, ni une version préfixée du filtre en niveaux de gris.

Cependant, vous pouvez utiliser une superposition SVG dans IE10 pour effectuer le nivellement de gris. Exemple:

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);
}

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

JSFiddle simplifié: http://jsfiddle.net/KatieK/qhU7d/2/

Plus d'informations sur les effets de filtre SVG sur IE10: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

34
KatieK

Le SVG en ligne peut être utilisé dans IE 10 et 11 et Edge 12.

J'ai créé un projet appelé grey qui inclut un polyfill pour ces navigateurs. Le polyfill éteint <img> balises avec SVG intégré: https://github.com/karlhorky/gray

Pour l'implémenter, la version courte consiste à télécharger le plugin jQuery sur le lien GitHub ci-dessus et à ajouter après jQuery à la fin de votre corps:

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

Alors chaque image avec la classe grayscale apparaîtra en gris.

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

Vous pouvez voir une démo aussi si vous le souhaitez.

22
Karl Horky

Utilisez ce plugin jQuery https://gianlucaguarini.github.io/jQuery.BlackAndWhite/

Cela semble être la seule solution multi-navigateurs. De plus, il a un effet de fondu en entrée et sortie en fondu.

$('.bwWrapper').BlackAndWhite({
    hoverEffect : true, // default true
    // set the path to BnWWorker.js for a superfast implementation
    webworkerPath : false,
    // to invert the hover effect
    invertHoverEffect: false,
    // this option works only on the modern browsers ( on IE lower than 9 it remains always 1)
    intensity:1,
    speed: { //this property could also be just speed: value for both fadeIn and fadeOut
        fadeIn: 200, // 200ms for fadeIn animations
        fadeOut: 800 // 800ms for fadeOut animations
    },
    onImageReady:function(img) {
        // this callback gets executed anytime an image is converted
    }
});
5
Corni