Hoe om te kry PNG transparency werk in blaaiers wat nie native ondersteun?

StackOverflow https://stackoverflow.com/questions/10243

  •  08-06-2019
  •  | 
  •  

Vra

Ons (geliefde) ontwerper hou die skep PNG-lêers met deursigtige agtergronde vir gebruik in ons programme.Ek wil graag om seker te maak dat hierdie funksie van die PNG werk in die "ouer" blaaiers as goed.Wat is die beste oplossing?

wysigings hieronder

@mabwi & @syd - of nie ek stem saam oor die gebruik van'n PNG is nie die punt nie.Dit is'n probleem wat ek nodig het om op te los!

@Tim Sullivan - IE7.js lyk pretty cool, maar ek dink nie ek wil in te voer al die ander veranderinge'n aansoek.Ek wil graag'n oplossing wat fixes die PNG kwessie uitsluitlik.Dankie vir die skakel.

Was dit nuttig?

Oplossing

Hier is 'n groot artikel wat verduidelik en wys hoe om PNG deursigtigheid hanteer in ouer blaaiers: http: //www.alistapart.com/stories/pngopacity/

Ander wenke

Ek het gevind wat lyk na 'n baie goeie oplossing hier is; Eenheid Interaktiewe -> Labs -> eenheid PNG fix

update Eenheid PNG is ook te sien op 'n lys van PNG fix opsies op NETTUTS

Hier is die hoogtepunte van hul webwerf:

  • Baie kompakte javascript: Onder 1KB
  • Oplossing vir 'n paar interaktiwiteit probleme wat veroorsaak word deur filter Internet Explorer se kenmerk.
  • Werk op img voorwerpe en agtergrond-beeld eienskappe.
  • loop outomaties. Jy hoef nie te klasse of oproep te definieer funksies.
  • Laat vir motor breedte en 'n outomatiese hoogte elemente.
  • Super maklik om te sit.

Ook gepaletteerde 8-bit PNG met volle alfa deursigtigheid bestaan, in teenstelling met wat Photoshop en GIMP kan maak dat jy glo, en hulle verneder beter in IE6 - dit sny net af deursigtigheid tot 1-bit. Gebruik pngquant om sulke lêers te genereer uit 24-bit PNGs.

IE7.js sal ondersteuning vir PNGs (insluitend deursigtigheid) in IE6 verskaf .

Ek het deurmekaar met die probeer om 'n webwerf met .pngs maak en dit is net nie die moeite werd. Die webwerf word stadig, en jy hacks wat nie werk nie 100% gebruik. Hier is 'n goeie artikel oor 'n paar opsies , maar my raad is om uit te vind 'n manier om gifs laat werk totdat jy hoef nie te IE6 ondersteun. Of net gee IE6 n vervalle ervaring.

Die gebruik van PNGs in IE6 is skaars 'n moeiliker as enige ander leser. Jy kan dit alles ondersteun in jou CSS sonder Javascript. Ek het gesien hierdie hack voor gewys ... 

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

Ek is nie so seker dit is geldige CSS, maar afhangende van die terrein, dit mag nie saak soveel.

(dit is die moeite werd om daarop te let dat die URL vir die eerste beeld is gebaseer op die gids van die style, waar die tweede is gebaseer op die gids van die bladsy word beskou - dus waarom hulle stem nie ooreen nie)

@Hboss

dit is alles goed en wel as jy weet presies al die lêers (en die dimensies van elk) wat jy gaan word vertoon - dit 'n koninklike pyn op daardie CSS-lêer in stand te hou sou wees, maar ek dink dit sal moontlik wees. As jy wil om te begin met behulp van deursigtige PNGs vir 'n paar baie algemene doeleindes: a) in verband grafiese soos ikone (miskien van verskillende grootte) wat werk op enige agtergrond, en b) herhaal agtergronde; dan is jy geskroef. Elke tydelike oplossing Ek het probeer om 'n struikelblok getref op 'n sekere punt (kan nie teks kies wanneer die agtergrond is deursigtig, soms die beelde vertoon word by gek groottes, ens ens), en ek het het bevind dat vir 'n maksimum betroubaarheid Ek sal moet terugkeer na gifs.

My raad is om te gee die PNG deursigtigheid hack 'n skoot, maar terselfdertyd besef dat dit is beslis nie volmaak - en onthou net, jy buig agteroor vir gebruikers van 'n leser wat meer as 7 jaar ou . Wat ek doen deesdae is gee IE6 gebruikers 'n pop-up op hul eerste besoek aan die terrein, met 'n vriendelike herinnering dat die leser is verouderd en nie die vereiste deur moderne webtuistes funksies aan te bied, en, alhoewel ons sal ons bes probeer om gee jou die beste is, sal jy 'n beter ervaring van ons webwerf en die internet as 'n geheel te kry as jy goed bloedige opgegradeer.

Ek glo alle blaaiers ondersteun PNG-8. Dit is nie die alfa gemengde, maar dit het wel 'n deursigtige agtergrond.

Ek mag verkeerd wees, maar ek is redelik seker IE6 en minder net nie doen deursigtigheid met'n PNG-lêers.

Jy soort van is, en jy soort van is nie.

IE6 het geen native ondersteuning vir hulle.

Egter, dit wil sê het ondersteuning vir die gek persoonlike javascript/css en COM voorwerpe (dit is hoe hulle oorspronklik geïmplementeer XmlHttpRequest)

Al hierdie hacks basies doen:

  • Vind al die png beelde
  • Gebruik'n directx beeld filter te laai hulle en produseer'n deursigtige beeld in'n soort van formaat IE verstaan
  • Die plek van die beelde met die gefiltreerde kopie.

Een ding om te dink oor is e-pos kliënte. Jy wil dikwels PNG-24 deursigtigheid maar in Outlook 2003 met 'n masjien met behulp van IE6. E-pos kliënte sal nie toelaat dat CSS of JS truuks.

Hier is 'n goeie manier om te hanteer nie. http://commadot.com/png-8 -dat-handelinge-agtige-png-24-sonder-vuurwerke /

As jy jou beelde te voer as PNG-8 uit Vuurwerke dan sal hulle dieselfde as gif beelde op te tree. So sal hulle nie shitty en grys kyk, sal deursigtigheid deursigtigheid, maar hulle sal die volle 24 bit lieflikheid dat ander blaaiers doen nie.

Kan nie heeltemal los jou probleem nie, maar ten minste kan jy deel manier kry daar net weer die uitvoer van hulle.

Ek kan verkeerd wees, maar ek is redelik seker dat IE6 en minder net deursigtigheid nie doen met PNG-lêers.

Ek het twee "oplossings" wat ek gebruik. Óf skep GIF-lêers met deursigtigheid en gebruik dié oral, of net gebruik dit vir Internet Explorer 6 en ouer met voorwaardelike style sheets. Die tweede werk eintlik net as jy hulle gebruik as agtergronde, ens.

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top