Stardust Wordpress Theme - Download
feed
classifica commentatori
categorie
archivio
risorse esterne
extra
Ago 01
Utilizzare PNG trasparenti su Internet Explorer
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.
4 Agosto 2006 alle 15:13
sai cosa, c’è un minimo di scarto temporale però..
4 Agosto 2006 alle 16:07
Scarto temporale in cosa? Non ho capito che intendi..
15 Novembre 2006 alle 20:50
[...] L’idea è interessante, ma si basa su un presupposto: è necessario utilizzare un png trasparente per ottenere l’effetto desiderato. Ho già parlato in passato dei problemi che esistono attualmente con questo tipo di immagini, ed infatti la trasparenza non è supportata da Internet Explorer 6. [...]
24 Novembre 2006 alle 10:29
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
24 Novembre 2006 alle 10:35
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.
29 Novembre 2006 alle 13:42
con IE funziona perfettamente.. io ho problemi con firefox xo..
21 Marzo 2007 alle 00:42
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?
21 Marzo 2007 alle 09:48
@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.
21 Marzo 2007 alle 09:50
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?
21 Marzo 2007 alle 15:41
Grazie Tom! Lo provo subito :-)
28 Marzo 2007 alle 12:04
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?
28 Marzo 2007 alle 15:14
@massi: la soluzione che ho segnalato poco sopra (vedi commento n°8) funziona con tutte le immagini PNG che inserisci in una pagina.
10 Aprile 2007 alle 09:59
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.
27 Giugno 2007 alle 08:56
potete risolverlo in 1 secondo con Gimp: aprite il png, andate nella finestra Livelli, selezionate mantieni la trasparenza, salvate ed è tutto ok.
Testato.
Ciao…
27 Giugno 2007 alle 09:28
@Max: con qualsiasi editor grafico puoi creare immagini trasparenti, ma non sono supportate da IE6 ed inferiori, a meno che non siano gif.
27 Giugno 2007 alle 12:38
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
16 Luglio 2007 alle 12:46
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
19 Luglio 2007 alle 15:02
L’ho provato ma su explorer il mio box diventa completamente trasparente.. Possibile? Ma l’immagine blank.gif deve esistere? Boooh!
18 Agosto 2007 alle 11:44
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… :/
29 Settembre 2007 alle 17:19
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
6 Novembre 2007 alle 18:55
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
7 Novembre 2007 alle 01:12
@Surio: grazie mille per la segnalazione, ho corretto il post :)
13 Novembre 2007 alle 13:03
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.
20 Novembre 2007 alle 13:29
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/
28 Gennaio 2008 alle 14:31
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
26 Febbraio 2008 alle 17:45
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!
26 Febbraio 2008 alle 17:52
…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
14 Aprile 2008 alle 13:57
mi spiegate il perchè di “back\ground-color” scritto così?
14 Aprile 2008 alle 15:08
@laura: è un hack per Explorer 6 :)
14 Aprile 2008 alle 15:09
ottimo grazie :-) !!
24 Aprile 2008 alle 16:07
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…
15 Maggio 2008 alle 12:21
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?
1 Luglio 2008 alle 15:24
l’immagine blank.gif come deve essere?
27 Agosto 2008 alle 17:11
[...] in un hack CSS che utilizza un filtro specifico per IE (per maggiori informazioni rimando al sito TomStardust.com). Personalmente ho sempre evitato di utilizzare questa tecnica perchè la proprietà [...]
3 Settembre 2008 alle 23:43
Qua ce ne sono indicate un altro po’…
http://tinyurl.com/5wme8d
ciao!