Forzare la trasparenza di un .png in Internet Explorer 6

aldolat@gmail.com (Aldo Latino) — Mon, 26 Jan 2009 20:14:07 +0000

Ero incerto se scrivere questo post. Incerto perché si deve invitare la gente a non usare Internet Explorer 6, invece di utilizzare questi hack per far visualizzare bene il nostro sito anche nelle vecchie versioni del browser di casa Microsoft. Se li utilizziamo è come dire loro: “continuate pure ad usarlo”. Ma può capitare che in un caso particolare sia necessario intervenire per modificare il comportamento di questo browser. A me è capitato e non avevo scelta. Dovevo intervenire e questo è quello che ho provato.

Dovevo usare per forza un’immagine png trasparente e la persona aveva IE6. Di installare Firefox non se ne parlava nemmeno. In sostanza, dovevo forzare Internet Explorer 6 a renderizzare correttamente il canale alpha (la trasparenza) di una immagine .png. Ecco le righe di codice che ho usato:

<div style="
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 100px;
  display:inline-block;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.mio-sito.it/percorso/alla/mia/immagine.png');">
  <img style="
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"
  src="http://www.mio-sito.it/percorso/alla/mia/immagine.png"
  width="200" height="100" border="0" alt="" />
</div>

Chiaramente vanno personalizzati alcuni valori come position, width/height e src. Ecco una diapositiva di come viene renderizzato in XP con IE6:

Internet Explorer 6 renderizza correttamente la trasparenza di una immagine PNG dietro applicazione di un hack.

Prima di chiudere una nota positiva. Ho dato un’occhiata alla pagina di Wikipedia in cui si parla di questo browser. Ho trovato una tabella sulla percentuale d’uso di IE ed ecco cosa ho visto:

La percentuale d’uso di Internet Explorer nei vari anni e versioni.

Una soddisfazione! Dal 94,43% siamo giunti al 72,65%: ha ancora quasi i 3/4 del mercato, ma sono sicuro che Firefox e i browser open andranno sempre più avanti.

La fonte dell’hack è questa, dove trovate anche degli altri adattamenti del codice.

L'articolo Forzare la trasparenza di un .png in Internet Explorer 6 è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Aldolat.it — Post con tag Canale Alpha

Forzare la trasparenza di un .png in Internet Explorer 6