Infoportal Transparente PNG im Internet Explorer 6

Diesen Beitrag auf der neuen Seite lesen

Für halb-transparente Hintergründe sind Bilder im PNG-Format die einzige praktische Lösung. Leider unterstützt der Internet Explorer bis Version 6 diese Transparenz nicht.


1. Die Bilder
Die fertige Seite muss mindestens zwei Hintergrundbilder haben. Einmal den normalen, undurchsichtigen Hintergrund und darüber (z.B. für Menüs, Textfelder o.ä.). Wie die normale Hintergrundgrafik aussieht, ist egal.

Das transparente Bild darf nur 1x1 Pixel groß sein, deshalb ist es nur für eine Farbe geeignet.
Das neue Bild mit einer beliebigen Farbe füllen und dann die Ebenendeckraft heruntersetzen, je nachdem, wie transparent es sein soll. Das Bild im PNG-Format (PNG-24 bei Photoshop) speichern.


2. Einbinden
Für alle modernen Browser reicht es, wenn ihr das transparente Hintergrund per CSS in etwa so einbindet:
#Inhalt {
background-image: url(../bilder/transparent.png);
}

Das passende HTML sieht so aus:


3. Einbinden im Internet Explorer
Damit das ganze für den Internet Explorer 6 funktioniert, muss man etwas tricksen.
Zunächst erstellt man eine neue CSS-Datei mit dem Inhalt
#inhalt {
width:auto;
filter:progidGrinsenXImageTransform.Microsoft.AlphaImageLoader(src='Bilder/transparent.png',sizingMethod='scale');
background:none;
}

Die Breite muss bestimmt werden, natürlich kann statt auto dort jede gültige Angabe stehen.
Diese Datei speichere beispielsweise als InternetExplorer.CSS
im Verzeichnis Stylesheets und binde die per Conditional Comment ein:
< !--[if lt IE 7]>< style type="text/css">@import url(Stylesheets/InternetExplorer.css);< /style> < ![endif]-->

Diesen Text irgendwo im head-Bereich der Seite einbinden.
Das wars auch schon. Wichtig ist, dass die Pfadangabe in dem Filter von der Seite ausgeht und nicht der CSS Datei.
Daher: Wenn ihr in verschiedenen Verzeichnissen Seiten habt, braucht ihr also jeweils angepasste Pfade.