Come mantenere PNG trasparenza alfa quando si usa "-ms-filtro" proprietà

ho il seguente codice HTML:Come mantenere PNG trasparenza alfa quando si usa "-ms-filtro" proprietà

<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 di questo si verifica sia in IE 8 e IE 7.

Quando l'immagine PNG è soggetto alla -ms filtro o filtro, la sua traspa alfa la pena è rovinata. Provalo e vedrai. È un bug in IE 8 e IE 7.

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

Qualcuno sa un lavoro intorno a questo problema?

fonte

2009-06-17 cbp

Non penso che abbiamo capito la tua domanda. Potresti provare a riformularlo? –

@SpliFF et al. - Qualcuno può aggiungere (o modificare) una risposta per dare il css necessario per fare un png con la trasparenza parziale con il 75% di opacità in IE 7 e 8. Questa è la domanda originale e nessuna risposta è completa. – OrangeDog

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

Sì, programmaticamente target IE6 e inferiore 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 gestirà PNG trasparenza per voi, senza ingombrare la CSS con il 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]-->

fonte

2009-06-17 03:43:23 SpliFF

Scusa non mi interessa IE 6 - Sto cercando di farlo funzionare in IE7 e IE8 quando si utilizzano le proprietà css '-ms-filter' o 'filter'. – cbp

La soluzione funziona anche per ie7. basta cambiare la condizione in IE8 e lo script in ie8.js – SpliFF

Ma il problema si verifica anche in IE 8: quando si applicano le proprietà 'filter' o '-ms-filter' nei CSS, qualsiasi trasparenza alfa PNG non funziona più. – cbp

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

Questa operazione applicherà l'AlphaImageLoader anche tutti i PNG nella pagina.

fonte

2009-06-17 04:10:04 cbp

Questo piccolo script (e alcuni tag span attorno alle immagini che vorrei sbiadire) è una meraviglia e un tesoro per coloro che devono lottare con l'abominio MSIE. – Brian

Per le persone che cercano un'altra risposta, ho risolto questo utilizzando il seguente codice che ho scritto io stesso in un semplice JavaScript, quindi è indipendente dal framework. Devi comunque metterlo all'interno dell'evento DOM ready del tuo framework (o puoi usare domready.js come ho fatto io). Carica tutte le immagini con l'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 qui sotto:

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

Ricordati di mettere dentro i commenti condizionali per IE:

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

Si prega di farmi sapere se ha funzionato bene. Cordiali saluti!

fonte

2010-11-08 18:08:07

Come mantenere PNG trasparenza alfa quando si usa "-ms-filtro" proprietà

risposta

Problemi correlati