Transparente PNG-Grafiken im Internet Explorer 6

5. Juni 2009 von in Webentwicklung

Transparente PNG-Grafiken im Internet Explorer 6

Manchmal benötigt man trotz der Möglichkeit transparente Bilder durch das GIF-Format darzustellen auch transparente PNG-Grafiken, da erst diese über Alphatransparenz verfügen und so ein sauberes Anti-Alaising ermöglichen.

Leider ist eine Darstellung von transparenten PNG Dateien im geliebten IE6 standardmäßig nicht möglich. Da trotz des Versuches von Microsoft mit einem Zwangsupdate auf den Internet Explorer 7 noch viele mit der alten Version im Internet unterwegs sind muss man sich etwas überlegen.

Im Internet kursieren ein paar Ansätze um dieses Problem zu beseitigen. Allerdings nur in Form von Javascript Lösungen, die meist umständlich einzubauen sind oder das konkrete Problem nicht richtig erfassen.

Meine Lösung um transparente PNG-Grafiken im alternden Internet Explorer 6 anzuzeigen funktioniert mit CSS. Nehmen wir an, wir wollen ein transparentes PNG als Hintergrundbild eines Layers definieren.

Vor dem Hack kommt zuerst der Code für andere Browser, die transparente PNG Files unterstützen. Anschließend wird über einen CSS-Hack der IE6 Code eingebunden:

<style type="text/css">
#layer {
background-image:url(bild.png);
}
</style>
<!--[if IE 6]>
<style type="text/css">
#layer {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png', sizingMethod='scale');
background:none;
}
</style>
<![endif]-->

Den Code kann man natürlich auch in eine externe CSS Datei auslagern. In meiner Lösung muss man zusätzlich background:none; setzen, das liegt am zuvor definierten background-image.

Die von mir verwendete Methode mit dem AlphaImageLoader wird offiziell von Microsoft auf einer Support Seite empfohlen. Wer mehr über den AlphaImageLoader erfahren möchte, der sei auf das Internet Explorer Developer Center im MSDN verwiesen.

Leider ist dieser IE 6 Hack nicht standardkonform und wird im CSS Validator durchfallen. Wer allerdings noch eine signifikante Anzahl an IE6 Besuchern hat, sollte den Hack auf jeden Fall benutzen oder notfalls auf transparente GIFs zurückgreifen. Bei mehreren PNG Dateien auf einer Website kann das Einfügen dieses Codes lästig sein, in dem Fall würde ich zu einer globalen Javascript Lösung greifen.

Share

53 Kommentare

  1. Kim
    16. April 2007 um 10:36

    Man kann PNGs mit z. B. Photoshop so abspeichern, dass sie immerhin wie GIFs transparent sein können, Alpha-Transparenzen gehen auf diese Weise nicht. Und es geht auch nur bei 8-Bit-PNGs. Man muss sich dazu eine Farbe aussuchen, die man als transparent markiert und dann geht es ganz ohne irgendwelche CSS- oder JS-Tricks. Vor dem Hintergrund kann man aber berechtigt fragen, warum man dann nicht gleich ein GIF nimmt.

  2. Stefan
    23. April 2007 um 10:04

    Kim, das Problem bei den GIFs oder PNGs mit definierter Hintergrundfarbe ist, dass eine Überlagerung auf einem inhomogenen, kontrastreichen Hintergrund unsauber aussieht.

    Eine weitere Alternative findet sich auch unter:
    http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

  3. xxxxxxxxxxxxxxx
    16. Mai 2007 um 09:08

    "warum man dann nicht gleich ein GIF nimmt"

    weil gif kein freies format ist.

  4. xxxxxxxxxxxxx
    16. Mai 2007 um 09:29

    auch 8-bit pngs ohne alpha-channel sind im ie 6 übrigens nicht transparent. gerade getestet.

  5. wladi
    22. Mai 2007 um 13:05

    hallo, ich habe hier überraschenderweise ein PNG, dass sowohl im IE6 als auch im FF mit Transparenzabstufungen funktioniert, unglaublich! Jetzt versuche ich seid einigen Stunden ein Tool zu inden, mit dem man PNGs für beide Browser kompatibel macht, vergeblich :( HAt jemand ne Ahnung? http://shots.snap.com/images/v2.5.5/theme/silver/bg/bg_320×347_bl.png

  6. Nils
    24. Mai 2007 um 15:52

    Wladi: Bei mir zeigt FF es mit korrektem Alphakanal an, IE6 zeigt es jedoch mit weisser Hintergrundfarbe.

  7. sven
    21. September 2007 um 13:02

    Bitte beachten:
    zwischen progid: und DXImageTransform darf KEIN Leerzwichen stehen, sonst funtionierts nicht!
    also:
    filter:progid:DXImageTransform
    statt:
    filter:progid: DXImageTransform

  8. simon
    29. September 2007 um 20:58

    Danke fuer den Tipp. Genau das was ich gesucht hab.

  9. pater
    26. Oktober 2007 um 17:34

    endlich mal ne lösung die einfach und effektiv is! thx
    hatte schon überlegt ne browserweiche vorzuschalten die alle ie user blockt und auf die möglichkeit hinweist, dass es auch andere browser gibt ;)

  10. schnusl
    16. November 2007 um 01:01

    Vielen Dank für diese Hack! Hab den gleich eingebaut und hat super funktioniert :D (wers sehn will betrachtet meine webseite in nem ie6 ;D )

  11. diggi
    9. Dezember 2007 um 19:45

    Hallo
    Ich habe mir mal das durchgelesen und finde das prima. Danke dafür.
    Nur noch eine Frage hierzu: Kann man das nicht für alle png coden, so das man nicht für jede png eine Zeile benötigt!?

  12. Andre
    15. Januar 2008 um 09:57

    Vielen Dank für die Lösung.
    Hat mir sehr geholfen.

  13. Motrix
    21. Januar 2008 um 23:53

    Hallo,

    vielen Dank für die einfache und Funktionierende Lösung.

  14. mariop3
    23. Januar 2008 um 09:40

    wichtig ist noch zu wissen das pfad relativ zur html datei stehen muss und nicht zur css datei…. darüber bin auch ich gestolpert… jaja mickysoft machts umständlich wie immer…

  15. Robert
    23. Januar 2008 um 15:14

    Von sämtlichen Google Ergebnissen, war das doch wirklich am hilfreichsten um das Problem zu verstehen. Durch die Kommentare der anderen Leser, wurden für mich alle fragen geklärt. wäre vielleicht ganz gut, wenn du dein Code-Beispiel daraufhin noch ergänzen könntest :) aber andererseits, sollen sich die leser auch mal mühe geben :)

    DANKE!

  16. coolture
    23. Januar 2008 um 18:20

    Hallo,

    in dem Bereich eingebundene Linkgrafiken funktionieren danach leider (bei mir) nicht mehr…

  17. Jan
    11. Februar 2008 um 20:12

    was mache ich denn, wenn der css-code in einer externen css-dateien steht?
    wie baue ich da die css weiche ein?

  18. Alex
    9. Mai 2008 um 09:16

    Hier eine Javascript-Funktion, die automatisch über alle Images geht und PNG – Images so mit dem DX Filter auf den IE 6.0 anpasst.
    Hoffe diese Funktion hilft jemandem.

    Beste Grüße

  19. Beckers
    14. Mai 2008 um 22:55

    Hallo jungs, ich habe es mit dem css “hack”
    auch mal ausprobiert und jetzt kommt der hamma bei dem ich echt hilfe benötige…

    local unter xamp funktioniert alles einwandfrei, unter allen explorern, aber sobald ich es auf meinen webspace schiebe verkackt es einfach mal komplett, das heißt es gibt dann gar kein hintergrund im ie 6 (im firefox immer noch alles top) könnt ihr mir sagen woran das liegen könnte? verzweifel hier langsam!!!

    über jede antwort dankbar!

  20. digitalfreak
    7. August 2008 um 10:19

    Ich habe gerade etwas sehr sehr seltsames festgestellt.

    Wenn ich ein PNG mit einer Auflösung von 72,009 DPI mit der Zeile:
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’bild.png’, sizingMethod=’crop’);

    laden will, funktioniert der AlphaImageLoader nicht!

    Wenn ich die Auflösung auf Exakt 72.000DPI herunter nehme funktioniert die o.g. Zeile problemlos.

    Ich finds immer wieder seltsam!!!

  21. tester
    28. August 2008 um 22:35

    Kann mir nicht helfen, der Code funktioniert NICHT. Definitiv nicht – mit allen Variationen die genannt worden sind.

    Jedenfalls nicht für ein div-hintergrund auf einem body Hintergrund. Das Ergebnis ist das das man sich denken kann durch background none – es wird nichts dargestellt :(

  22. Robert
    22. Februar 2009 um 18:35

    Der Hack funkionierte nach dem Ausprobieren “ein bisschen”, aber nicht umfassend und perfekt. Eine Lösung, die man nicht aus dem Auge lassen sollte, wäre aus meiner Sicht die Erstellung nicht-transparenter pixelgenauer Grafiken, die den Hintergrund jeweils übernehmen. Das kostet zwar Mühe, funkioniert aber auf alle Fälle.

  23. Robert Hartl
    15. April 2007 um 01:02

    Statt conditional comments geht auch ein kleiner Hack für den IE6:
    BSP:

    /* Weiche exklusiv für den besten aller Browser - IE 6 */
@media all{
* html b\ody #container-irgendwas{
wie oben;}
}
/* ende ie6*/

    klappt einwandfrei.

  24. Michael
    15. April 2007 um 14:24

    Hallo Robert,
    danke für die Ergänzung. Der Tipp hat nur einen Hack verwendet. Wie man dem Internet-Explorer nun den Code unterschiebt war nicht Inhalt des Posts, sondern wie man transparente PNG-Grafiken dem IE6 beibringt ;)

    Aber wie gesagt; Danke für die Ergänzung.

  25. Thomas
    14. Juni 2007 um 23:01

    Michael, deine Lösung funktioniert perfekt. Leider gibt es dabei einen kleinen Schönheitsfehler :-)

    Der CSS-Validator ist gar nicht glücklich mit so einer Lösung.

  26. Jens
    15. August 2008 um 22:28

    bin zufällig auf diese Seite gestoßen und bin sehr überrascht was es hier
    alles für interessante Themen gibt. Werde jetzt öfters mal vorbeischauen.

  27. Ren
    30. September 2008 um 15:55

    Hallo Leutz,
    wie es in Foren leider oft der Fall ist, wird zwar Hilfestellung geleistet, aber meist unvollständig oder schlichtweg falsch, weil man es eben nicht besser weiß. Deshalb habe ich noch einmal das Thema zusammengefasst und hoffe das es hiermit für alle verständlich wird und dabei auch vollständig und richtig dokumentiert ist:

    1. Link zum Thema Microsoft IE6:
    http://support.microsoft.com/?kbid=294714

    2. Der Code in deiner HTML Datei sieht z. B. so aus:

    <div id="Loginmenu-01"></div>

    oder in PHP:

    echo '<div id="Loginmenu-01"></div>';

    3. In deiner CSS-Datei muss dann folgendes erscheinen:

    /* die Pfad- und Dateiangaben sowie Positionsangaben sind natürlich individuell einzugeben und hier nur ein Beispiel! */
 
#Loginmenu-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1280px;
	height:206px;
	background-image: url(../../bildpaket/index/Loginmenu_01.png);
}
 
/* Hack für IE6 indem * html vorangestellt wird */
/* Wichtig! background:none; */
 
* html #Loginmenu-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1280px;
	height:206px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../bildpaket/index/Loginmenu_01.png', sizingMethod='scale');
	background:none;
}

    Beide Einträge sind in der CSS notwendig, der erste für alle Browser außer IE, der zweite gilt nur für den IE (* html)!

    Gruß Ren:)

  28. Michael Gattinger
    31. Oktober 2008 um 11:25

    Um das in Tabellen anzuzeigen müsst ihr die position auf relativ stellen!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <style type="text/css">
#Loginmenu-01 {
position:relativ;
width:120px;
height:15px;
background-image: url(hud_links_untermenue_ausgeschnitten_blau.png);
}
* html #Loginmenu-01 {
position:relativ;
width:200px;
height:15px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hud_links_untermenue_ausgeschnitten_blau.png', sizingMethod='scale');
background:none;
}
  </style>
</head>
<body style="background-color: blue; color: red;">
<table style="text-align: left; width: 250px;" border="2"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td>_</td>
      <td>_</td>
      <td>_</td>
    </tr>
    <tr>
      <td>_</td>
      <td>
      <div id="Loginmenu-01"></div>
      </td>
      <td>_</td>
    </tr>
    <tr>
      <td>_</td>
      <td>_</td>
      <td>_</td>
    </tr>
  </tbody>
</table>
</body>
</html>

    mfg michael

  29. Tonsibonsi
    18. Juni 2009 um 15:28

    Wenn ihr wollt das gleich die korrekte Grösse eueres Bildes angezeigt wird könnt ihr sizingMethod=’image’ setzen.

    Gruss

    Tonsi

  30. Webagentur
    26. Juli 2009 um 15:58

    Vielen Dank … bei mir funktioniert dieser Hack einfach wunderbar.

  31. Dirk
    29. Juli 2009 um 00:33

    Ich habe das gleiche Problem wie Beckers, leider auch noch keine Lösung dafür gefunden. Kann jemand helfen?

  32. detailverliebt.
    10. August 2009 um 00:48

    Vielen vielen Dank für diese einfache Hilfe!
    Unglaublich dass es sofort und ohne Probleme funktioniert hat.

  33. Lena
    17. August 2009 um 04:30

    Langsam verliere ich den Glauben an das Gute im IE. Kann doch nicht sein, daß man für diesen Browser immer nacharbeiten muss. besten Dank für die Lösung. Hat wunderbar geklappt

  34. Codaweb
    17. August 2009 um 15:17

    Immer wieder das gleiche Problem – PNGs auf Webseiten, warum macht man uns Entwicklern das Leben so schwer…?

  35. Lena
    17. August 2009 um 15:40

    Kleines Problem mit dem hack…leider lassen sich meine Links im IE die im Div stehen nicht mehr anklicken…könnte das etwas mit dem Filter zu tun haben? (Werden angezeigt aber lassen sich nicht anklicken…

  36. Lena
    17. August 2009 um 16:15

    http://www.daltonlp.com/view/217

  37. Website Performance
    21. August 2009 um 09:51

    Funktioniert das eigentlich auch mit Teiltransparenzen oder nur mit Volltransparenzen, wie man sie vom Gif-Format kennt? Wird also ein abgestufter Alpha-Kanal verwendet? Kenne mich mit den Microsoft’schen Filtern nicht aus und versuche sie eigentlich wo es eben geht zu vermeiden.
    Allerdings ist es sehr praktisch, wenn man teiltransparente Bilder über verschiedene Hintergründe legt und damit mit einer einzige Graphik einen Effekt über mehrere Bildelemente legen kann. Schliesslich braucht man dann weniger Bilder übertragen und spart ggf. Requests.
    Übrigens sind die Patente seit 2006 abgelaufen, so dass einer Verwendung von dieser Seite her nichts mehr im Wege steht.

  38. Chris Date
    13. November 2009 um 09:33

    Hi,
    Ich hab zwar keine transparenten png´s aber dafür transparente gif´s verwendet und als Background hab ich in der CSS Datei dann die png´s angegeben. Grund: Der Benutzer soll die Icons auswechseln können.
    Im IE7, IE8, Netscape und Firefox funktioniert das wie gewollt.
    Im IE6 aber haben die Icons einen leicht blau schimmernden Hintergrund… kann mir einer sagen wodurch der hervorgerufen wird und wie ich den weg bekomme? hier die Icons und ein Code ausschnitt aus der .css und .aspx datei

    http://img12.imageshack.us/img12/1774/iconsy.jpg
    http://img109.imageshack.us/img109/9915/cssu.jpg
    http://img18.imageshack.us/img18/5180/aspxa.jpg

  39. karl
    13. November 2009 um 19:40

    danke für den supertip! manchmal gehts so einfach und man steht vor einer wand..

  40. Schoschie
    19. Dezember 2009 um 22:13

    Der Grund, transparente PNGs anstelle von GIFs zu benutzen ist ganz klar, dass PNG echtes Alpha-Blending, also quasi-stufenlose Transparenz von völlig deckend bis völlig durchsichtig unterstützt (tatsächlich sind 256 Abstufungen möglich, was in der Praxis ausreicht).

    In GIF gibt es stattdessen nur eine 1-Bit-Transparenzmaske: jedes Pixel im GIF ist entweder 100% deckend oder 100% transparent, aber nichts dazwischen. Der Unterschied ist signifikant, wenn transparente Bilder z. B. über einen Hintergrund mit wechselnden Farben gelegt werden sollen. GIF-Transparenz kann immer nur für eine Hintergrundfarbe berechnet werden, darauf funktioniert sie dann gut, da Photoshop et al. das Alphablending simulieren, indem sie die entsprechenden Übergangsstufen errechnen. Sobald der Hintergrund aber ein anderer ist, werden sofort unschöne Treppen und Blitzer sichtbar.

Neuere Kommentare »

Diesen Artikel kommentieren