png trasparenti su ie6: soluzione definitiva
Dopo varie soluzioni o PNG fix provate per ottenere l’alpha channel sulle immagini in formato PNG ovvero la PNG trasparenti funzionanti sull’ancor diffusissimo IE Internet Explorer 6 posso affermare di aver individuato quella definitiva.
Nel precedente post PNG trasparenti anche con Internet Explorer 6 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 PNG fix 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 IE6: 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 l’ alpha channel, quindi inseriamo nel codice CSS la stringa:
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 l’ alpha channel 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, IE 6, PNG fix, png trasparenti
Ritieni questo post utile o interessante?
Condividi e Segnala
Leggi anche:
dei commenti -
lascia un commento - trackback
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!
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.
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!
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!
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
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!
August 20th, 2008, 10:11 am
bel post
October 10th, 2008, 11:25 pm
ciao, ho riscontrato altri problemi con questo hack.
Ho scoperto che quando serve un effetto rollover, sia che stia usando una sola immagine (e poi usare il trucco left bottom per cambiare stato) sia che usi due immagini per creare sempre il rollover, con l’hack non funziona. Non va proprio nè il rollover, e se stai usando una sola immagine per fare l’effetto, tutta la tua immagine viene “schiacciata” a forza entro l’altezza del contenitore ke la contiene… cioè ti ritrovi i due link nel contenitore, quando in realtà :hover dovrebbe farti slittare in su il primo stato a favore del secondo…
Nessuna soluzione?
che noia infinita sto ie6, quando mai l’hanno pensato.
l’unica cosa mi viene in mente un bel commento condizionale per dare solo ad ie uno stato diverso, perche non si può compromettere l’effetto per tutti gli altri bw…
October 14th, 2008, 10:42 pm
Ciao a tutti.
Vorrei segnalarvi questo strumento come aiuto per una soluzione definitiva e senza traumi del problema pngfix in ie: dynamite4css.sourceforge.net.
E’ un framework molto interessante che ho iniziato ad usare nel corso della mia attività lavorativa; in sostanza, se ben configurato, crea in automatico una pngfix.
Dopo aver semplicemente analizzato i file CSS che gli si assegnano, Dynamite4css cerca in essi una proprietà background o background-image che contenga un path ad un file con estensione PNG.
Crea quindi un CSS dinamico che viene automaticamente linkato alla pagina e lo utilizza per assegnare via PHP differenti proprietà a differenti browser. Provare per credere!
October 15th, 2008, 9:26 am
Grazie Luca, mi hai incuriosito: darò un’occhiata approfondita a questo framework e se lo riterrò utile per il nostro lavoro ne parlerò proprio su queste pagine.
December 3rd, 2008, 1:06 pm
mitico….mi hai salvato il sederino….dopodomani ho la presentazione di una demo….e ora sono pronto
avevo il problema del menu, un fancymenu di mootools, il quale si caricava delle png dal css……con questo ,htc miracoloso ora funziona…….
Grazie e ancora grazie