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

Designerul nostru (iubit) păstrează crearea de fișiere PNG cu fundaluri transparente pentru a fi utilizate în aplicațiile noastre. Aș dori să vă asigur că această caracteristică a PNG funcționează și în browserele "mai vechi". Care este cea mai bună soluție?

editați mai jos

@mabwi & @syd - Whether or not I agree about the use of a PNG is not the point. This is a problem that I need to solve!

@Tim Sullivan - IE7.js arată destul de cool, dar nu cred că vreau să introduc toate celelalte modificări o cerere. Aș dori o soluție care rezolvă exclusiv problema PNG. Vă mulțumim pentru link.

0
fr hi bn

12 răspunsuri

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ă.
0
adăugat

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

0
adăugat
PNG-8 poate fi amestecat . Probabil că te referi la eroare/limitare în Photoshop.
adăugat autor Kornel, sursa

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.

0
adăugat

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.
0
adăugat

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

0
adăugat
Am incercat multe solutii, dar asta a facut cu adevarat treaba! Și are multe alte caracteristici îngrijite pe măsură ce încearcă să facă Microsoft Internet Explorer să se comporte ca un browser compatibil cu standardele. Repară multe probleme HTML și CSS și face ca PNG transparent să funcționeze corect sub IE5 și IE6.
adăugat autor Kasper, sursa
de aceea i recomand tuturor! (îmi pare rău pentru comentariul suplimentar)
adăugat autor Kasper, sursa

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

0
adăugat
Acest articol este datat și utilizează o detectare foarte slabă a browserului. Există mult mai multe soluții elegante decât acest lucru, de ex. twinhelix.com/css/iepngfix
adăugat autor Kornel, sursa

@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.

0
adăugat
Site-ul pe care îl susțin are aproximativ 40% IE7, 32% IE6 și 18% Firefox.
adăugat autor nickf, sursa
în 2009, până în prezent, site-ul nostru obține 13% din persoanele care utilizează IE6. acest trafic vine aproape exclusiv de pe Facebook chiar acum - deci aproximativ 13% dintre utilizatorii dvs. de Facebook sunt obișnuiți pe IE6. sux, dar asta e realitatea
adăugat autor Simon_Weaver, sursa

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.

0
adăugat

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.

0
adăugat
Aceste PNG-uri pe 8 biți, cu un canal alfa, pot fi exportate cu ușurință de la focuri de artificii. În paleta "Optimize and Align", selectați "PNG 8" și "Transparența Alpha". Nu pot găsi această abilitate în Photoshop (ca în CS3).
adăugat autor Taylor Edmiston, sursa

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)

0
adăugat

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.

0
adăugat
te inseli
adăugat autor Salvin Francis, sursa
utilizați filtre CSS pentru a permite transparența png în IE 6
adăugat autor Salvin Francis, sursa

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/

0
adăugat