Proseguo con l’articolo precedente riguardante le trasparenze nel web, facendo riferimento questa volta ad altre due tipologie di trasparenza realizzate utilizzando immagini png.
2) PNG TRASPARENTI (no-repeat)
Generalmente quando si vogliono realizzare delle immagini che possano adeguarsi a qualsiasi colore di sfondo, per esempio i loghi, si usano le GIF trasparenti che permettono di rendere visibile solamente il logo mentre tutto il resto può avere una trasparenza totale.
Il limite di questo formato è dato dalla possibilità di poter utilizzare solamente 256 colori e di non poter realizzare delle semi-trasparenze.
Fortunatamente esiste un altro formato che permette di superare questo problema: PNG con canale alfa. Le immagini PNG possono lavorare con una profondità di colore fino a 48bit (true color) e utilizzare il canale alfa per realizzare delle trasparenze totali o parziali.
Il formato è supportato da tutti i browser recenti ad esclusione di IE6 il quale non è in grado di gestirne la trasparenza. Per aggirare questa problematica si può utilizzare pngfix.js, una funzione realizzata in javascript, che viene applicata a tutte le png inserite nel codice html (<img src=”nomeimmagine.png” />). Io preferisco utilizzare IE PNG FIX, un file con estensione .htc che invece viene inserito direttamente nel foglio di stile come nell’esempio qui sotto:
<style type="text/css">
img {
behavior: url("pngbehavior.htc");
}
</style>
e che funziona sia per le immagini in linea che per le PNG inserite direttamente nel CSS da utilizzare come sfondi. In questa maniera posso applicare la regola solamente al foglio di stile che realizzo per IE6 (ogni riferimento a versione di Internet Explorer precedenti la 6, non è puramente casuale: li escludo a priori 🙂 ).
Questa funziona correttamente con la proprietà background-repeat: no-repeat, ma non permette di validare il CSS.
2) PNG TRASPARENTI (repeat-x, repeat-y o repeat)
In questo caso c’è poca da dire, visto che regnano diverse incompatibilità oltre che con IE6 anche con l’ultima versione, IE7. Infatti, se vogliamo utilizzare una PNG trasparente come sfondo di un div possiamo realizzare un’immagine di 1px per 1px (trasparente) e applicarla a tutto il div attraverso l’uso del background-repeat.
Solo che in IE6 le png non vengono ripetute, quindi si potrà vedere solo un unico pixel di sfondo, anche se nel CSS abbiamo inserito la regola corretta con il file .htc.
IE7 a meno che non applichiamo al div una dimensione fissa (o un min-height se vogliamo comunque far rendere il sito adattabile in altezza) si comporta in maniera anomala, creando anche più sovrapposizioni dello stesso sfondo con conseguenti problemi di visibilità dei contenuti del sito.
Se qualcuno ha trovato qualche altro caso interessante, i commenti sono ben accetti.
