Als erstes erstellen wir ein standardkonformes XHTML-Dokument, versehen Body mit einem Hintergrund damit wir von der Transparenz auch was mitbekommen. Anschließend definieren wir einen Container (DIV) den wir wie gewünscht positionieren und mit den transparentem Hintergrundbild versehen.
Anmerkung, wenn hier in diesem Artikel vom IE (Internet Explorer) die Schreibe ist, dann meint es immer IE kleiner Version 7. Denn ab dieser Version wurden alle hier aufgezeigten Mängel beseitigt.
Wie wir auf der Demoseite 1 sehen konnten funktioniert in den „guten“ Browsern alles wie gewünscht.
Um nun den IE auch davon zu überzeugen benutzen wir eine Besonderheit die nur der IE kennt. Damit auch weiterhin ein valides und den Standards des W3C entsprechendes XHTML dabei heraus kommt packen wir die entsprechenden Angaben in einen Kommentar den wiederum nur der IE interpretiert. Das sieht dann so aus:
<!--[if lt IE 7]> <style type="text/css"> .transparent{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../trans1.png'); } </style> <![endif]-->
Nun müssen wir natürlich auch noch das Hintergrundbild das wir dem Container über die Klasse transparent zugewiesen haben verstecken. Dies erreichen wir mit einer Zuweisung die nur die „guten“ Browser kennen, sogenannte Kind-Selektoren.
html>body .transparent{ background:url(../../trans1.png); }
Da bei dieser Variante die Links im IE nicht zu benutzen sind müssen wir einen weiteren Trick anwenden. Dazu verwenden wir einfach ein Bild welches nur 1 × 1px groß ist und lassen es scalieren.
<!--[if lt IE 7]> <style type="text/css"> .transparent{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../19.png', sizingMethod='scale'); } </style> <![endif]-->
Wir gehen wieder von unserem Grundlayout (Demo 1) aus.
Dazu fügen wir erst mal die Links in den Container ein.
Um nun wieder den IE davon zu überzeugen dies auch zu tun versehen wir den ganzen Container mit Transparenz. Dies geschieht wieder unter Zuhilfenahme der Conditinal Comments:
<!--[if lt IE 7]> <style type="text/css"> .transparent{ filter:Alpha(opacity=80); } </style> <![endif]-->
In dieser Variation ist nun der ganze Container transparent. Hat den Vorteil, dass wir mit sich wiederholenden Hintergrundbildern arbeiten können.
Diesmal fügen wir zusätzlich einen Container für die Links ein. Unseren transparenten DIV positionieren wir mittels float, das Menü legen wir mit position:absolute; darüber.
.transparent{ float:left; height:20em; margin:0 0 0 30px; width:300px; } .menu{ left:30px; position:absolute; top:30px; width:300px; }
Es ist mit viel Aufwand verbunden die volle Leistungsfähigkeit die uns der Einsatz von CSS bietet auszuschöpfen, immer wieder stoßen wir auf Hindernisse die meist der am meisten verbreitete IE aufstellt. Ich bin der Meinung dieser inzwischen schon sehr alte Browser entwickelt sich immer mehr zum Hindernis wenn man neue Techniken einsetzen möchte. Alle anderen Browser wurden in den letzten Jahren weiterentwickelt, der IE seit mindestens 2001 nicht mehr!
Ich hab hier mal noch 2 Demos erstellt die auch transparente PNG verwenden. Diesmal aber ohne Anpassungen für den IE. Also bitte nicht mit dem Internet Explorer < Version 7 anschauen, oder doch ... und ärgern. Wer nun doch auf den Geschmack gekommen ist einen anderen Browser zu testen, dem empfehle ich Mozilla Firefox. Den man bei Mozilla herunterladen kann. Eine einfache Einführung zur Bedienung gibt es auf der Seite von Ralph Segert. Aber auch jeder andere Browser ist besser als der IE.
Vielleicht kommen einmal Zeiten wo der IE in der Verbreitung unter 50 % liegt, dann lass ich mir vielleicht was einfallen und er bekommt gar keine CSS mehr zu sehen 😉
Am 23. August 2010 um 09:34 Uhr schrieb [DW CS4] Transparenter Hintergund mit PNG:
[…]…und ich hab da noch was gefunden.
http://olaf-bosch.de/experimentelles/transparente-png-auch-im-internet-explorer/
Der Gute löst das Problem mit dem Explorer 6. Wuuuahhh! […]
Am 21. August 2009 um 10:25 Uhr schrieb Website Performance:
Hallo,
ich kenne mich mit den Filtern von Microsofts Browsern nicht wirklich aus. Mir stellt sich nun die Frage, ob die Filter immer funktionieren oder ob man darauf angewiesen ist, dass ActiveX aktiviert ist. In der Vergangenheit wurde den Nutzern aus Sicherheitsgründen geraten ActiveX zu deaktivieren. Da die Sicherheitslücken des IE aufgrund seiner Verbreitung häufiger ausgenutzt werden und einige Sicherheitspakete ebenfalls ActiveX abschlaten, sollte es dann Probleme mit der Darstellung der Transparenzen geben.
Gruß
Alex
Am 21. August 2009 um 14:18 Uhr schrieb Olaf:
Klaro Alex, da hast du natürlich absolut Recht. Ist JS und/oder ActiveX deaktiviert hilft alles nix.
Übrigens auch keine anderswo zu findende Lösung (*.htc oder PNGFix usw.), denn letztlich setzen die auch selbige Filter, nur halt über Umwege 🙂
Am 10. Dezember 2009 um 12:40 Uhr schrieb Chris:
Ich finde dieses Tutorial sehr gut und anschaulich, deshalb danke von mir.
Wer IE 6 u. darunter verwendet u. dann JS deaktiviert hat ist selber schuld, das er diese Browser verwendet und deren Anzahl sollte verschwindend gering sein.
Ich halte es für einen Rückschritt, ständig auf diese Minderheiten Rücksicht zu nehmen, damit regt man diese gerade noch an, sich nichtmal um einen besseren Browser zu bemühen.
Und IE6 u. deaktiviertes Scripting ist ja auch sooo sicher.
Wenn ich auf transparente pngs verzichten muss, dann auch auf max-width, min-width u. dergleichen, die auch über JS für die alten IEs tauglich gemacht werden können.
Also das ist es mir wirklich nicht wert.
Aber ich weiß auch natürlich, das dies in best. Fällen leider so gemacht werden muss.
Am 25. Januar 2010 um 11:12 Uhr schrieb Sascha:
Großen Dank an den Autor. Habe ich lange nach gesucht. Dieses Problem hätte mich fast irre gemacht.
Weiter so…..
Gruß Sascha
Am 7. Februar 2010 um 17:46 Uhr schrieb Sören:
Hallo Olaf
Hab vielen Dank für die Bereitstellung des Tutorials.
Es hat mir weiter geholfen.
Gruß Sören
Am 9. Juni 2010 um 14:00 Uhr schrieb Lars Lafontzke:
Danke fürs Tutorial! Sehr anschaulich, gut gemacht!
Am 19. August 2011 um 11:00 Uhr schrieb Jens:
Vielen Dank fürs Tutorial, hat einwandfrei funktioniert.
Am 28. Juni 2012 um 10:50 Uhr schrieb Matthias Eggert:
Immer wieder schön, wenn man als Anfänger kostenlose Tutorials und Hilfe im Netz findet.
Am 11. Oktober 2012 um 13:41 Uhr schrieb Martin B.:
Mein Tipp!
Das Bild in eine Ebene packen.
In den CSS Eigenschaften für die Ebene dann als Hintergrundfarbe transparent abgeben.
Etwaige Anweisungen zu Deckkraft der Ebene ebenfalls in deren CSS Eigenschaften unterbringen. Dann machen PNGs auch ohne großen Aufwand im IE keine Probleme.
Am 19. März 2014 um 14:09 Uhr schrieb Marketer:
Leider ist dieser Tipp veraltet und nicht mehr richtig!
‹!–[if lt IE 7]–›
.transparent{
filter:Alpha(opacity=80);
}
Gilt zwar für IE7, doch diese Lösung klappte bei mir nicht. Es wollte nicht transparent schalten.
Am 19. März 2014 um 14:44 Uhr schrieb Olaf:
lt bedeutet dort kleiner als, also spricht den IE7 garnicht an, mach das lt zu lte und es bedeutet kleiner und gleich. Dann gilt es auch für den IE7