Il formato PNG per le immagini è sempre più diffuso sul web da quando è stato creato nel 1995, e con l’utilizzo delle trasparenze consente di ottenere ottimi risultati.
E’ infatti possibile sovrapporre immagini trasparenti ad altri elementi per arrivare ad interessanti combinazioni irraggiungibili con il formato GIF, se non fosse per i soliti problemi di compatibilità con Internet Explorer.
Al contrario dei vari Firefox, Opera, ecc.., il browser di casa Microsoft non supporta le trasparenze dei PNG mostrando un improbabile sfondo grigio.
La soluzione in attesa di IE7 consiste in un hack CSS che permette di aggirare il problema utilizzando un particolare filtro per IE (dalla versione 5.5 in poi).
Potete vedere subito l’esempio che ho realizzato; per i vostri test tutto quello che dovrete fare è usare il seguente codice CSS:
#overlay{
background: url(opaco70.png);
}
* html #overlay { /* Regole per IE (dalla 5.5 in poi) */
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="opaco70.png" ,sizingMethod="scale");
}
Ovviamente la vostra immagine PNG andrà a sostituire opaco70.png dell’esempio, così come il nome dell’elemento a cui applicare la trasparenza.
I problemi di questa tecnica? Eccoli:
- Non è supportata da Internet Explorer 5 ed inferiori, quindi se il vostro sito è studiato per funzionare anche con questo browser, meglio evitare di utilizzarla
- L’elemento a cui applicate la trasparenza dovrà avere width e height impostate, o in alternativa position: absolute (decisamente restrittivo, lo so)
- L’utilizzo di CSS hack deprecati e non standard
Traete le vostre conclusioni, la cosa potrebbe tornare sicuramente utile aspettando l’uscita ufficiale di IE7, ma sono da valutare bene i pro ed i contro.
sai cosa, c’è un minimo di scarto temporale però..
Scarto temporale in cosa? Non ho capito che intendi..
Con questa tecnica ho inserito un div container uno sfondo png e all’interno di questo div ho classi con UL che fungono da pulsanti del sito. come si risolve questo problema che non fa rollover ai pulsanti???
ciao
Non credo di aver capito bene, se hai un esempio da mostrare sarà più facile risponderti.
Teoricamente una volta realizzato il contenitore con lo sfondo trasparente non dovresti avere alcun tipo di problema con quello che inserisci al suo interno.
con IE funziona perfettamente.. io ho problemi con firefox xo..
Ciao Tom, grazie per questo tutorial sulle png.
Per quanto riguarda, invece, le png non inserite sul foglio css, ma inserite tramite codice nelle pagine, cosa puoi consigliarmi di fare per evitare lo sfondo grigio di ie6?
Ho inserito il codice css che hai consigliato per vedere i png in background e in effetti ora vedo lo sfondo trasparente, in compenso però non mi funzionano più i link che stavano nella tabella contenuta dentro lo spazio delimtato da anche se il codice html sembra in ordine. Cosa succede?
@Giofilo: prova a dare un’occhiata a questa soluzione per la gestione delle immagini PNG anche su IE6, usa Javascript. Nell’esempio le immagini sono nel codice, potrebbe fare al caso tuo.
Grazie Tom! Lo provo subito :-)
intanto grazie mille per questa perla però io che sono alle prime armi,non so una cosa,
se io devo inserire varie immagini png in una tabella devo ogni volta aggiungere
questo codice? come faccio?
@massi: la soluzione che ho segnalato poco sopra (vedi commento n°8) funziona con tutte le immagini PNG che inserisci in una pagina.
rileggo questo post grazie alla classifica appena pubblicata.
Personalmente ho provato sia l’hack css sia il pngfix.js
E li ho abbandonati pressocché del tutto, rassegnandomi a usare quasi sempre il formato gif per le immagini con trasparenze, fino a che internet explorer non gestirà correttamente il canale alpha dei png. Il motivo è lo “scarto temporale” segnalato da dandyna nel primo commento. In pratica le immagini vengono visualizzate prima con lo sfondo grigio e poi “sanate”. In caso di lentezza (del client, in genere) a caricare il css o a processare il javascript l’effetto non è il massimo. Quando posso, inserisco dei ritardi nella visualizzazione delle immagini, ma non sempre mi è possibile.
potete risolverlo in 1 secondo con Gimp: aprite il png, andate nella finestra Livelli, selezionate mantieni la trasparenza, salvate ed è tutto ok.
Testato.
Ciao…
@Max: con qualsiasi editor grafico puoi creare immagini trasparenti, ma non sono supportate da IE6 ed inferiori, a meno che non siano gif.
Non mi sono spiegato bene… anch’io avevo il problema di immagini png trasparenti che con IE6 avevano lo sfondo grigio… ma col procedimento che ti ho detto diventa trasparente anche per IE6… ed è sempre png.
Scrivimi se hai altri dubbi…
ciao
Per quanto riguarda la dichiarazione di altezza e larghezza dell’immagine (questo: L’elemento a cui applicate la trasparenza dovrà avere width e height impostate, o in alternativa position: absolute) è possibile risolvere impostando “sizingMethod” con il valore “image” al posto di “scale”. Non ho provato con il css che c’è qui, ma sul mio funziona alla grande.
ciao
L’ho provato ma su explorer il mio box diventa completamente trasparente.. Possibile? Ma l’immagine blank.gif deve esistere? Boooh!
Max mi hai salvato!!! :D
Avevo provato la procedura di Tom con ie 6 ma questo mi bloccava l’esecuzione di contenuto attivo (ma quale???) e anche se acconsentivo a farlo eseguire non mi mostrava una cippa, precisamente mi mostrava uno spazio bianco… :/
io non ho l’immagine blank.gif e non mi funziona.
ma l’indirizzo all’immagine da mettere trasprente va messo con quale formato ?
se lo metto cosi ..//images/foto_home.png finziona ugualemente ?
Ora sto scaricando gimp x vedere se funziona il metodo alternativo
Ho trovato l’errore!
Nell’ ultima riga di codice, dopo “progid:” bisogna togliere lo spazio, altrimenti non funziona:
Sbagliato:
filter: progid: DXImageTransform
Giusto:
filter: progid:DXImageTransform
@Surio: grazie mille per la segnalazione, ho corretto il post :)
Ciao, scusate l’intrusione. Sono una mezza schiappa (arrotondata per difetto, in realtà lo sono molto di più) con i CSS, e ho lo stesso problema con queste maledette trasparenze.
Ho qualche domanda, se posso:
1) @ MAX
Max quindi tu sostieni che un’immagine, salvata mettiamo con Photoshop (esporta x web) con attributi di trasparenza, non funziona (o meglio, necessita del trucco tramite codice), mentre la stessa immagine, però esportata da Gimp, risolve il problema? Senza altre righe di codice?
Se mi dai conferma mi installo al volo Gimp… Anche se non comprendo dove possa essere la differenza (ma se funziona sai quanto me ne importa?)
2) @ TOM
Non ho capito bene l’immagine “blank.gif” a cosa serva e come debba essere fatta (una ripetizione di una gif semplice, trasparente?), né la riga di codice “back\ground-color…”. Lo “\” è un errore nel codice oppure è necessario? Se sì, cosa rappresenta?
Scusate le domande, ma sto con la corda saponata in mano, ormai… Grazie per tutte le dritte, ciao a tutti.
Mi permetto di chiarire quanto affermato da MAX:
http://mcapewell.wordpress.com/2006/09/07/how-to-make-a-transparent-png-image-for-ie-6-in-the-gimp/
mi sembra ci sia un solo problema Tom! + che un problema è una limitazione. non è possibile specificare il background-repeat dell’elemento HTML a cui è associato lo sfondo semitrasparent. In sostanza è come se IE prendesse per default la regola css background-repeat: repeat
ciao!
come diceva rosa prix .. inserendo un link su uno sfondo PNG in un div .. nn vengono + attivati..
ho provato in tutti i modi con i vari hack tipo pngfix.. ma nulla..
voi ci siete riusciti?
grazie!
…per esempio scaricando i sorgenti del file che hai realizzato.. ed inserendo all’interno del div “overlay” un link ad una parola qualsiasi nn lo prende..
ci sto sbattendo la testa da mesi su sto problema…
a volte funziona a volte no..
ma capite che nn puo’ basarsi sul caso!!!
saluti
mi spiegate il perchè di “back\ground-color” scritto così?
@laura: è un hack per Explorer 6 :)
ottimo grazie :-) !!
Io ho questa roba:
/* Logo */
#logo {
float: left;
width: 240px;
height: 100px;
}
/*Trasparenza*/
#logo {
background: #FFBF23 url(logo.png) no-repeat center;
}
* html #logo { /* Queste regole sono per IE */
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”logo.png”, sizingMethod=”scale”);
}
Ma cn Explorer nn me lo fa proprio vedere lo sfondo…
Riprendo il problema di Francesca e chiedo aiuto per questo fatto. I link che stanno dietro un div con un png il quale è stato corretto con la bugfix, non funzionano e non sono cliccabili. Stessa cosa vale per i campi moduli.
Come si risolve questo?
l’immagine blank.gif come deve essere?
Qua ce ne sono indicate un altro po’…
http://tinyurl.com/5wme8d
ciao!
meno male che qualcuno posta cose utili in giro…
Ciao a tutti! scusate ma vorrei kiedervi perkè nn riesco a togliere la trasparenza appena apro IE? vi prego aiutatemi! grazie
Salve, ho seguito le dritte ed effettivamente le immagini png ora si vedono in trasparenza, però non mi funzionano più i link.
C’è un modo per risolvere il problema?
Grazie mille!
@Soffy potrebbe tornarti utile questo link sul filtro AlphaImageLoader di Internet Explorer. Il problema con i link può essere evitato se l’elemento con il filtro non ha una position assegnata, mentre il div contenitore sì.
@Tom volevo ringraziarti, ho fatto come mi hai detto e adesso funziona tutto, grazie mille! :)