zur Navigation

olaf-bosch.de

Transparente PNG auch im Internet Explorer

PNG als Hintergrund

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.

Demo 1

Anpassungen für den IE6

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

Demo 2

Anpassungen wegen Links

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]-->

Demo 3

Transparente Container

Wir gehen wieder von unserem Grundlayout (Demo 1) aus.
Dazu fügen wir erst mal die Links in den Container ein.

Demo 4

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]-->

Demo 5

In dieser Variation ist nun der ganze Container transparent. Hat den Vorteil, dass wir mit sich wiederholenden Hintergrundbildern arbeiten können.

Transparentes durch Überlagerung

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

Demo 6

Zusammenfassung und Ausblick

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 😉

11 Kommentare zu “Transparente PNG auch im Internet Explorer”

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

  2. 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 🙂

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

  4. Großen Dank an den Autor. Habe ich lange nach gesucht. Dieses Problem hätte mich fast irre gemacht.

    Weiter so…..

    Gruß Sascha

  5. Hallo Olaf

    Hab vielen Dank für die Bereitstellung des Tutorials.
    Es hat mir weiter geholfen.

    Gruß Sören

  6. Danke fürs Tutorial! Sehr anschaulich, gut gemacht!

  7. Vielen Dank fürs Tutorial, hat einwandfrei funktioniert.

  8. Immer wieder schön, wenn man als Anfänger kostenlose Tutorials und Hilfe im Netz findet.

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

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

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

Ein Trackback/Ping zu “Transparente PNG auch im Internet Explorer”

  1. […]…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! […]

Einen Kommentar schreiben

top