Comment appliquer des filtres en niveaux de gris dans Internet Explorer 10 ?

Application de filtres en niveaux de gris dans Internet Explorer 10

Internet Explorer 10 présente un défi pour l'application de filtres en niveaux de gris à l'aide des méthodes CSS traditionnelles. Contrairement aux versions précédentes d'IE, les filtres DX et les filtres en niveaux de gris préfixés ne sont plus pris en charge.

Solution : superposition SVG

Pour les images en niveaux de gris dans IE10, vous pouvez utiliser un SVG recouvrir. Cela implique l'utilisation d'un filtre SVG avec une matrice qui convertit l'image en niveaux de gris.

Code CSS :

<code class="css">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");
}</code>

Considérations supplémentaires :

• La technique de superposition SVG fonctionne mieux lorsque l'image a un arrière-plan uni.
• Pour plus d'informations sur les effets de filtre SVG dans IE10, reportez-vous à : http://blogs.msdn.com /b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Exemple :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!