Come far funzionare la trasparenza PNG nei browser che non la supportano nativamente?

Question

Il nostro (amato) designer continua a creare file PNG con sfondi trasparenti da utilizzare nelle nostre applicazioni.Vorrei assicurarmi che questa funzionalità del PNG funzioni anche nei browser "più vecchi".Qual è la soluzione migliore?

modifiche di seguito

@mabwi e @syd - Il punto non è se sono d'accordo o meno sull'uso di un PNG.Questo è un problema che devo risolvere!

@Tim Sullivan - IE7.js sembra piuttosto interessante, ma non penso di voler introdurre tutte le altre modifiche in un'applicazione.Vorrei una soluzione che risolva esclusivamente il problema PNG.Grazie per il collegamento

Answer 1

Ecco un ottimo articolo che spiega e mostra come gestire la trasparenza PNG nei browser meno recenti: http://www.alistapart.com/stories/pngopacity/

Answer 2

Ho trovato quella che sembra essere un'ottima soluzione qui: Unit Interactive -> Labs -> Unit PNG Fix

aggiornamento Unit PNG è presente anche su a elenco delle opzioni di correzione PNG su NETTUTS

Ecco i punti salienti dal loro sito web:

• Javascript molto compatto:Meno di 1kb!
• Risolve alcuni problemi di interattività causati dall'attributo del filtro di IE.
• Funziona su oggetti img e attributi dell'immagine di sfondo.
• Funziona automaticamente.Non è necessario definire le classi o chiamare le funzioni.
• Consente elementi con larghezza e altezza automatiche.
• Semplicissimo da implementare.

Answer 3

• IE PNG Correzione 2.0 che supporta background-position E -repeat!

Anche PNG a 8 bit con palette piena trasparenza alfa esistono, contrariamente a quanto Photoshop e GIMP potrebbero farti credere, e si degradano meglio in IE6: riduce semplicemente la trasparenza a 1 bit.Utilizzo pngquant per generare tali file da PNG a 24 bit.

Answer 4

IE7.js fornirà il supporto per i PNG (inclusa la trasparenza) in IE6.

Answer 5

Ho provato a creare un sito con .pngs e semplicemente non ne vale la pena.Il sito diventa lento e usi hack che non funzionano al 100%.Ecco un buon articolo su alcune opzioni, ma il mio consiglio è di trovare un modo per far funzionare le gif finché non sarà necessario supportare IE6.O semplicemente dai a IE6 un'esperienza degradata.

Answer 6

L'uso dei PNG in IE6 non è certo più difficile di qualsiasi altro browser.Puoi supportare tutto nel tuo CSS senza Javascript.Ho già visto questo trucco mostrato prima...

div.theImage {
    background  : url(smile.png) top left no-repeat;
    height      : 100px;
    width       : 100px;
}

* html div.theImage {
    background  : none;     
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}

Non sono così sicuro che si tratti di CSS valido, ma a seconda del sito potrebbe non avere molta importanza.

(vale la pena notare che l'URL della prima immagine si basa sulla directory del foglio di stile, mentre il secondo si basa sulla directory della pagina visualizzata, ecco perché non corrispondono)

Answer 7

@Hboss

va tutto bene se conosci esattamente tutti i file (e le dimensioni di ciascuno) che verranno visualizzati: sarebbe un vero dolore mantenere quel file CSS, ma suppongo che sarebbe possibile.Quando vuoi iniziare a utilizzare PNG trasparenti per alcuni scopi molto comuni:a) grafica accessoria come icone (magari di dimensioni diverse) che funzionano su qualsiasi sfondo e b) sfondi ripetuti;allora sei fregato.Ogni soluzione alternativa che ho provato a un certo punto ha incontrato un ostacolo (non è possibile selezionare il testo quando lo sfondo è trasparente, A volte le immagini vengono visualizzate in dimensioni stravaganti, ecc. Ecc) e ho scoperto che per la massima affidabilità dovrò tornare alle gif.

Il mio consiglio è di provare l'hack della trasparenza PNG, ma allo stesso tempo rendersi conto che non è assolutamente perfetto e ricorda, ti stai facendo in quattro per gli utenti di un browser che ha più di 7 anni.Ciò che faccio in questi giorni è offrire agli utenti IE6 un popup alla loro prima visita al sito, con un promemoria amichevole che il loro browser è obsoleto e non offre le funzionalità richieste dai siti Web moderni e, anche se faremo del nostro meglio per darti il ​​meglio, otterrai un'esperienza migliore dal nostro sito e da Internet nel suo complesso se AGGIORNATI DAVVERO BEN.

Answer 8

Credo che tutti i browser supportino PNG-8.Non è una fusione alfa, ma ha sfondi trasparenti.

Answer 9

Potrei sbagliarmi, ma sono abbastanza sicuro che IE6 e meno semplicemente non facciano trasparenza con i file PNG.

In un certo senso lo sei e in un certo senso non lo sei.

IE6 non li supporta nativamente.

Tuttavia, IE supporta oggetti javascript/css e COM personalizzati pazzeschi (che è il modo in cui hanno originariamente implementato XmlHttpRequest)

Tutti questi hack sostanzialmente fanno questo:

• Trova tutte le immagini PNG
• Utilizza un filtro immagine DirectX per caricarli e produrre un'immagine trasparente in un formato compreso da IE
• Sostituisci le immagini con la copia filtrata.

Answer 10

Una cosa a cui pensare sono i client di posta elettronica.Spesso desideri la trasparenza PNG-24 ma in Outlook 2003 con una macchina che utilizza IE6.I client di posta elettronica non consentiranno trucchi CSS o JS.

Ecco un buon modo per gestirlo.http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

Answer 11

Se esporti le tue immagini come PNG-8 da Fireworks, funzioneranno come immagini GIF.Quindi non sembreranno schifosi e grigi, la trasparenza sarà trasparenza ma non avranno tutta la bellezza a 24 bit che hanno gli altri browser.

Potrebbe non risolvere completamente il tuo problema, ma almeno puoi arrivare in parte a riesportarli.

Answer 12

Potrei sbagliarmi, ma sono abbastanza sicuro che IE6 e meno semplicemente non facciano trasparenza con i file PNG.

Ho due "soluzioni" che utilizzo.Crea file GIF con trasparenza e usali ovunque, oppure usali semplicemente per IE 6 e versioni precedenti con fogli di stile condizionali.Il secondo funziona davvero solo se li usi come sfondi, ecc.