Cum se obține transparența PNG în browsere care nu o suportă în mod nativ?

S-ar putea să mă înșel, dar sunt destul de sigur că IE6 și mai puțin pur și simplu nu fac transparență cu fișierele PNG.

Am două "soluții" pe care le folosesc. Fie creați fișiere GIF cu transparență și folosiți-le peste tot, fie doar pentru IE 6 și mai în vârstă, cu foi de stil condiționate. Cel de-al doilea lucru funcționează numai dacă le folosiți ca fundaluri etc.

IE7.js will provide support for PNGs (including transparency) in IE6.

Here is a great article that explains and shows how to handle PNG transparency in older browsers: http://www.alistapart.com/stories/pngopacity/

Cred că toate browserele acceptă PNG-8. Nu este alfa amestecat, dar are fundaluri transparente.

I've found what looks to be a very good solution here: Unit Interactive -> Labs -> Unit PNG Fix

update Unit PNG is also featured on a list of PNG fix options on NETTUTS

Iată cele mai importante din site-ul lor:

• Javascript foarte compact: sub 1kb!
• Remediază unele probleme de interactivitate cauzate de filtrul IE? s atribut.
• funcționează pe obiecte img și atribute de fundal-imagine.
• Se execută automat. Nu trebuie să definiți clase sau să apelați funcții.
• Permite lățimea automată și elementele de înălțime auto.
• Super ușor de implementat.

S-ar putea să fiu confundat, dar sunt destul de sigur că IE6 și mai puțin pur și simplu nu fac transparență cu fișierele PNG.

Ești un fel și nu ești așa.

IE6 nu are niciun sprijin nativ pentru ei.

Cu toate acestea, IE are suport pentru javascript/css personalizate nebun și obiecte COM (care este modul în care inițial au implementat XmlHttpRequest)

Toate aceste hack-uri practic face acest lucru:

• Găsiți toate imaginile PNG
• Utilizați un filtru de imagini directx pentru a le încărca și pentru a produce o imagine transparentă într-un fel de format pe care IE îl înțelege
• Înlocuiți imaginile cu copia filtrată.

Am incercat sa fac un site cu .pngs si nu merita. Site-ul devine lent și folosiți hack-uri care nu funcționează 100%. Iată un articol bun despre unele opțiuni , dar sfatul meu este să găsiți o modalitate de a face GIF-urile să funcționeze până când nu trebuie să sprijiniți IE6. Sau doar dati IE6 o experienta degradata.

Folosirea PNG-urilor în IE6 este cu greu mai dificilă decât orice alt browser. Puteți susține toate acestea în CSS fără Javascript. Am văzut hack-ul prezentat mai devreme ...

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");
}

Nu sunt sigur că acest lucru este valid CSS, dar în funcție de site, poate că nu contează atât de mult.

(este demn de remarcat faptul că adresa URL pentru prima imagine se bazează pe directorul foii de stil, unde al doilea se bazează pe directorul paginii pe care o vizualizați - de ce nu se potrivesc)

@Hboss

asta e bine și dandy dacă știți exact toate fișierele (și dimensiunile fiecăruia) pe care le veți afișa - ar fi o durere regală pentru a menține acel dosar CSS, dar presupun că ar fi posibil. Când doriți să începeți să utilizați PNG transparente pentru câteva scopuri foarte comune: a) grafică incidentă, cum ar fi icoane (poate de dimensiuni diferite) care funcționează pe orice fundal și b) fundaluri repetate; atunci ești înșelată. Orice soluție pe care am încercat-o a lovit un punct de poticnire într-un anumit moment (nu se poate selecta text atunci când fundalul este transparent, câteodată imaginile sunt afișate la dimensiuni exacte etc etc). a constatat că pentru o fiabilitate maximă va trebui să revin la gif.

Sfatul meu este să dați o șansă transparenței PNG, dar în același timp să înțelegeți că nu este perfect - și amintiți-vă, vă îndoiți înapoi pentru utilizatorii unui browser care are peste 7 ani . Ceea ce fac în zilele noastre este să le dau utilizatorilor IE6 un popup la prima lor vizită pe site, cu un memento prietenos că browser-ul lor este depășit și nu oferă caracteristicile cerute de site-urile moderne și, deși vom încerca tot ce putem vă va oferi cele mai bune, veți obține o experiență mai bună de pe site-ul nostru și internetul în ansamblu, dacă vă BLOODY WELL UPGRADED.

• IE PNG Fix 2.0 which supports background-position and -repeat!

De asemenea, există palete PNG pe 8 biți cu transparență alfa completă , spre deosebire de ceea ce vă pot face să creadă Photoshop și GIMP și ele se degradează mai bine în IE6? doar reduce transparența la 1 biți. Utilizați pngquant pentru a genera astfel de fișiere din PNG-uri pe 24 de biți.

Un lucru de gândit este clienții de e-mail. Deseori doriți transparență PNG-24, dar în Outlook 2003 cu o mașină care utilizează IE6. Clienții de e-mail nu vor permite trucurile CSS sau JS.

Here is a good way to handle that. http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

Dacă exportați imaginile ca PNG-8 de la focuri de artificii, atunci ele vor acționa la fel ca imaginile gif. Deci nu vor arăta rahat și gri, transparența va fi transparența, dar nu vor avea toată frumusețea de 24 de biți pe care o fac alte browsere.

Nu este posibil să vă rezolvați problema în totalitate, dar cel puțin puteți să vă implicați într-o anumită măsură, doar să le exportați.