Comment conserver la transparence alpha de PNG lors de l'utilisation de la propriété «-ms-filter»

Question

J'ai le code HTML suivant:

<a><img src="myfile.png" /> Some text</a>

Et ce css:

a:hover
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: .75;
}

Le problème avec cela se produit à la fois dans IE 8 et IE 7.

Lorsque l'image PNG est soumise au -ms-filter ou au filtre , sa transparence alpha est ruinée. Essayez-le et vous verrez. C’est un bogue dans IE 8 et IE 7.

Puis-je supprimer le " -ms-opacity " et " filtre " propriétés appliquées en CSS? Quelle est la syntaxe pour cela? (par exemple, quelque chose comme -ms-filter: ""; )

Est-ce que quelqu'un connaît un problème autour de ce problème?

Answer 1

UPDATE: le filtre AlphaImageLoader appliqué directement à img peut remplacer le filtre alpha. En ce qui concerne la suppression d’un filtre, avez-vous essayé filtre: aucun; ?

Oui, ciblez IE6 et versions antérieures par programme avec des commentaires conditionnels.

<!--[if lt IE 7]>
<style>a:hover{filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);}</style>
<![endif]-->

Des scripts tels que IE7-js gèrent pour vous la transparence PNG sans encombrer votre CSS avec du code non standard.

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Answer 2

En embellissant la réponse de SpliFF, je pourrais résoudre ce problème en ajoutant le jQuery suivant à ma page:

$(function() {
    if (jQuery.browser.msie)
        $('img[src$=".png"]').each(function() { // must have quotes around .png
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
        });
});

Ceci appliquera AlphaImageLoader à tous les fichiers PNG de la page.

Answer 3

Pour ceux qui recherchent une autre réponse, j’ai résolu ce problème en utilisant le code suivant que j’ai écrit moi-même en JavaScript, c’est donc indépendant du cadre. Vous devez tout de même l'insérer dans l'événement DOM Ready de votre framework (ou vous pouvez utiliser domready.js comme je l'ai fait). Il charge toutes les images avec l'extension .PNG avec AlphaImageLoader. Cela doit être fait avant d’appliquer le filtre Alpha (vous pouvez aussi appliquer le filtre après ce code avec JS).

Le code ci-dessous:

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.toLowerCase().substr(imgSrc.length-4) === '.png') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

N'oubliez pas de l'insérer dans les commentaires conditionnels pour IE:

<!--[if IE]><![endif]-->

S'il vous plaît laissez-moi savoir si cela a bien fonctionné. Cordialement!