Come mantenere la trasparenza alfa PNG quando si utilizza la proprietà "-ms-filter"

Question

Ho il seguente HTML:

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

E questo css:

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

Il problema si verifica in IE 8 e IE 7.

Quando l'immagine PNG è soggetta al -ms-filter o al filtro , la sua trasparenza alfa è rovinata. Provalo e vedrai. È un bug sia in IE 8 che in IE 7.

Posso rimuovere " -ms-opacity " e "filtro" proprietà applicate nei CSS? Qual è la sintassi per questo? (ad esempio qualcosa come -ms-filter: " " ;; )

Qualcuno sa come risolvere questo problema?

Answer 1

AGGIORNAMENTO: AlphaImageLoader applicato direttamente a img può sovrascrivere il filtro alfa. Per quanto riguarda la rimozione di un filtro hai provato filter: none; ?

Sì, indirizza a livello di programmazione IE6 e precedenti con commenti condizionali.

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

Anche gli script come IE7-js gestiranno la trasparenza PNG per te senza ingombro il tuo CSS con codice 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

Abbellendo la risposta di SpliFF, ho potuto risolvere questo problema aggiungendo il seguente jQuery alla mia pagina:

$(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')";
        });
});

Questo applicherà anche AlphaImageLoader a tutti i PNG nella pagina.

Answer 3

Per le persone che cercano un'altra risposta, ho risolto questo problema usando questo codice che ho scritto in JavaScript, quindi è indipendente dal framework. Devi comunque inserirlo all'interno dell'evento DOM pronto per il tuo framework (oppure puoi usare domready.js come ho fatto io). Carica tutte le immagini con estensione .PNG con AlphaImageLoader. Deve essere fatto prima di applicare il filtro Alpha (puoi applicare il filtro anche dopo questo codice con JS).

Il codice seguente:

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 + "')";
        }
    }
}

Ricorda di inserirlo nei commenti condizionali per IE:

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

Per favore fatemi sapere se ha funzionato bene. Cordiali saluti!