DD_belatedPNG: transzparens, átlátszó hátterű PNG-k IE6 alatt


Nemrég én is “felhomályosultam”, hogy az Internet Explorer 6-os verziója nem kezeli a transzparens png-ket. A következő, igen egyszerű és gyorsan beépíthető megoldást szeretném ismertetni.

A szkriptről röviden csak annyit (mint háttérinformáció):

  • nem használja a Micro$oft “AlphaImageLoader” nevű förmedvényét
  • támogatja a háttér pozícionálást (background-position), valamint a háttérismétlést (background-repeat)
  • valamint javítja az IE6 alatt tapasztalt “szürke háttér” problémát

A DD_belatedPNG használata:

1
2
3
4
5
6
7
8
9
10
11
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');
 
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->

A fenti kód <head> tag-ban foglal helyet.

Értelemszerűen minden olyan elemnek, amelynek a háttere vagy a forrása png képre hivatkozik, és transzparenssé szeretnénk tenni: a példa alapján ’png_bg’ class-al látjuk el.
div-ek id-jét meg lehet adni, ha a hátterük, vagy a bennük lévő div-ek háttere png kép. DE, ’body’-t nem választhatjuk ki!
Továbbá megadhatjuk akár az ’img’-t is, így minden ’img’ taget “átkonvertál”.

Pár példa a helyes használathoz:

1
DD_belatedPNG.fix('#div_neve');
1
DD_belatedPNG.fix('#div_neve, img, .class_nev');

A szkript ezen a címen érhető el: DD_belatedPNG: Medicine for your IE6/PNG headache!

Kapcsolódó bejegyzések:
  • Gondolom már sokan beleszaladtak webszerkesztés közben az alábbi IE hibába: nem kezeli az átlátszó (transzparens) png képeket, sajnos azok háttere szürke alapért …

  • Color: az adott elem színét adhatjuk meg vele. Pl.H1 { color: blue } H2 { color: #0000ff } H3 { color: #0c0 }Background Color: az adott elem háttérsz …

  • Egyre ritkábban ugyan, de még előfordul, hogy a HTML elkészítésekor a grafikusnak/designernek (esetleg magunknak :)) hála szeretnénk úgy PNG24-es képeket használ …

  • Nem számít egy nagyon új dolognak a CSS segítségével megvalósított gomb, viszont a dinamikus szélességgel bíró gomb igenis új távlatokat nyit a weblapkészítésben …

  • Többen is gondolkodnak azon, hogyan is lehetne gyorsan és megbízhatóan átirányítani az oldalukat más internetes címre. A leírás több módszert is bemutatA …

A cikket beküldte: d3xter20 (http://)

5 hozzászólás

  1. ViZion says:

    rengeteg ilyen és hasonló hack van IE6-ra, hiszen a szerencsétlen egy halom problémával küzd.
    El kellene jutni oda, hogy aki IE6-ot használ, annak folyamatosan 1-2 percenként beugrik egy ablak az aktuális böngészőket ajánlva.
    pl. a gmail vagy a youtube is ezt csinálja -igaz csak fent egy sorban jelenik meg, h chrome-ot használj…

  2. Hápi says:

    megint nem lehet latni a postot

  3. asam9 says:

    most látni a leírást és ki is próbáltam, eddig amikkel dolgom volt, messze ez a legjobb, egyszerű és gyors. köszönet érte!

  4. toxin says:

    “Nemrég én is “felhomályosultam”, hogy az Internet Explorer 6-os verziója nem kezeli a transzparens png-ket”

    ez nem teljesen igaz, megérne egy teljes cikket, de már mások megírták:

    http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

    Csaba

  5. cyrus says:

    Teljesen jó megoldás ez is, ehhez még tudnám ajánlani a slimejs-t is, amely olyasmi mint a dd-belated megoldás. drupalnal, joomlanal pl ez utobbiak helyett alkalmaztam a fentebbit, mert egyszerűbb, ugyanakor a dd-belated nagyon jól konfigurálható, cserébe jó sok memoriát kér :)

Szólj hozzá
a DD_belatedPNG: transzparens, átlátszó hátterű PNG-k IE6 alatt c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>