PNG trasparenti su IE6: la soluzione definitiva

Dopo varie soluzioni provate per ottenere l’alpha channel sulle immagini in formato PNG ovvero la trasparenza funzionante sull’ancor diffusissimo IE 6 posso affermare di aver individuato quella definitiva.

In un precedente post era stato preso in esame il problema e proposte un paio di soluzioni funzionanti: l’unico difetto rimaneva l’impossibilità di ottenere PNG trasparenti quando usati come sfondo di elementi HTML tramite il CSS.

Grazie al sito TwinHelix Designs sono venuto a conoscenza di questo nuovo metodo che, con piacevole sorpresa, permette il rendering adeguato dell’alpha channel nel vetusto browser Microsoft.

Il procedimento è lo stesso del precedente post: scarichiamo il file iepngfix.zip, scompattiamolo e prendiamo i 2 file necessari per visualizzare il canale alpha delle PNG su Explorer 6: blank.gif, una GIF trasparente necessaria per far funzionare l’hack, e iepngfix.htc: quest’ultimo file viene usato insieme alla proprietà behaviour, un’esclusiva estensione made in Microsoft che ci permette di correggere questi vizi senza disturbare l’operato di altri browser.
Inseriamo questi file nella stessa directory dove si trova il file che caricherà le PNG di cui vogliamo visualizzare la trasparenza, quindi inseriamo nel codice CSS la stringa:

img, div {behavior: url(iepngfix.htc);}

e il gioco è fatto!
In questo caso, oltre agli elementi IMG, è necessario associare il behavior anche ai DIV, se occorre la trasparenza su altri elementi basta assegnargli questa proprietà.

ATTENZIONE…

Se si vuole assegnare uno sfondo trasparente ad un qualsiasi elemento della pagina, è probabile che questo debba stare sopra gli altri elementi, avere quindi uno z-index maggiore e un position: absolute.
Purtroppo l’applicazione forzata di questo filtro per la trasparenza causa un bug in alcuni elementi figli di quello con posizione assoluta, per la precisione i collegamenti presenti in questi blocchi smettono di funzionare.
Per risolvere il problema si ricorre all’ennesimo hack, di cui potete trovare informazioni esaustive sul sito Satz an Satz.

Cerca: alpha channel, IE6, Internet Explorer, PNG trasparenti

Ritieni questo post utile o interessante?
Condividi e Segnala

7 commenti per “PNG trasparenti su IE6: la soluzione definitiva”

andreWEb ha detto:
July 23rd, 2008, 12:08 am
Ciao, ho letto il nuovo articolo ma non capisco una cosa, e per cercare di risolvere spiego cosa ho bisogno:

ho un menu di navigazione gestito tramite e ho due con all’interno rispettivamente due link A. Nel mio css stato normale di a c’è un’immagine e in a:hover c’è la stessa immagina ma con proprietà background-position: left bottom per effettuare il rollover. Entrambe le immagini assegnate sia per a normale ke per a:hover sono delle .png. Sono immagini che hanno delle PARTI trasparenti, e non tutte, quindi io vorrei capire se questo hack funziona applicando la trasparenza ALLO SFONDO, e non a tutta l’immagine come ho letto in giro che accade.

NOn capisco poi perchè continui a parlare di tag IMG qui se le immagini sono associate a sfondi con i css… grazie!
R.A.M.Page ha detto:
July 23rd, 2008, 10:16 am
Si parlava di tag IMG perchè così la trasparenza è applicata anche alle PNG dell’HTML, non solo a quelle che fungono da background, è una soluzione unica.

Non capisco cosa intendi per applicare trasparenza all’immagine o allo sfondo…se l’immagine fa da sfondo non sono lo stesso file?
L’hack permette di visualizzare il canale alpha channel (la trasparenza sui colori in pratica, non un colore trasparente come le GIF) allo stesso modo dei browser moderni quindi come lo vedi su Firefox o IE7 è come lo vedrai su IE6 tramite il fix.
andreWEb ha detto:
July 23rd, 2008, 10:34 am
perdonami, spero di aver capito…

Quindi questo fix funziona tramite la gif 1×1 trasparente e il file .htc e rende trasparente le zone che originariamente nella png sono state definite come trasparenti? Ti spiego, perche ho letto in giro che invece rende trasparente tutta l’immagine. Io invece ho delle zone di sfondo ai miei due pulsanti (sia in stato normale che over) che avevo reso trasparenti ma IE6 me le da bianche e l’effetto non è certo carino…
Poi quindi in questo caso devo attribuire nella regola sia img, che il tag a? al posto del div intendo perchè il mio contenitore è a….

ciao e grazie!
R.A.M.Page ha detto:
July 24th, 2008, 2:00 am
Sì ad entrambe le domande :)
e comunque, basta che fai una prova su un browser moderno, l’effetto che otterrai con IE6 è lo stesso, dopo il fix ovviamente.

Buon lavoro!
Gioweb ha detto:
August 5th, 2008, 9:06 am
Grazie per l’aiuto ho risolto brillantemente il mio problema. Ho visto che questo sistema viene utilizzato anche sul sito Apple per sovrapporre al fondo le belle immagini dei prodotti: http://www.apple.com/it/macbookpro/
http://www.apple.com/it/macbookpro/styles/macbookpro.css
mi ero sempre chiesto come facessero.

Ciao
Gioweb
andreWEb ha detto:
August 5th, 2008, 7:21 pm
grazie mille, ho fatto la prova con un lavoretto che stavo facendo e funziona! Speriamo di non trovare altri problemi con sto IE… ciao!
Giacomo ha detto:
August 20th, 2008, 10:11 am
bel post

PNG trasparenti su IE6: la soluzione definitiva