Alpha-Transparenzen

Um Transparenzen in eine Webseite zubringen, hat man die Möglichkeit, dass man Filter für den IE oder Mozilla verwendet, damit man das geschwünschte Ergebnis erhält. Aber leider vererbt sich diese Transparenz auf alle Kinds-Elemente. Das ist natürlich nicht so schön. Eine weitere Möglichkeit besteht darin, dass man PNGs mit Alpha-Transparenz verwendet.

Doch leider mag dies der Internet Explorer gar nicht und lässt die Tranparenz einfach unter den Tisch fallen. Doch dank dem XHTMLFORUM bzw. Labuschin Webdesign habe ich jetzt eine Möglichkeit gefunden, dass man auch im IE die Alpha-Transparenz zu sehen bekommt. Auf meiner Testseite habe ich dieses auch gleich eingesetzt.

  1. #menue {
  2.   background-image: url(images/hintergrundmenue.png);
  3. }
  4. * html #menue {
  5.   bac\kground-image: none;
  6.   filter: progid: DXImageTransform.Microsoft.
  7.   AlphaImageLoader(src = 'layout/images/hintergrundmenue.png',
  8.   sizingMethod='scale');
  9. }

Die erste Anweisung ist für alle Browser gedacht, die entweder die Alpha-Transparenz darstellen können oder nichts mit der zweiten Anweisung anfangen können. Für den IE ist erst die zweite Anweisung interessant. Zum Einen müssen wir das vorher geladene Bild wieder entfernen und zum Anderen wird dann mit einer speziellen Anweisung das selbe PNG-Bild geladen. Der Backslash in background-image ist beabsichtigt, weil dieser Filter erst ab dem IE 6.0 existiert. Und wenn wir das normale Hintergrundbild für alle IEs entfernen, dann kann man bei IE 5.5 und kleiner nicht mehr sehr viel lesen.

Durch diese lange Anweisung kann der IE auch im PNG die Alpha-Tranparenz nutzen. Nur noch einen Schönheitsfehler gibt es. Wenn sich das PNG als Hintergrundbild wiederholt, dann muss ein Layout angegeben werden, sonst gibt es keine Wiederholung. Zum Layout zählen hierbei Breite, Höhe und absolute Positionierung. Laut Microsoft gibt es noch zwei weitere Möglichkeiten, aber die halte ich nicht für gut.

Beim IE7 gibt es beim normalen einbinden der PNG mit Alpha-Transparenz sehr merkwürdige Farbverläufe. Wenn ich für diesen Browser die gleiche Variante wie für den IE6 wähle, dann sieht es auf allen Browser ähnlich aus.

Ich habe auch festgestellt, dass der IE6 bei gewissen Situationen Probleme bekommt. Bindet man das PNG mittels der Anweisung von Microsoft in einen Tag, zum Beispiel ein DIV, ein, das absolut positioniert ist und in diesem Tag einen Link, so ist dieser Link für den IE6 nicht klickbar. Mittels JavaScript habe ich herausgefunden, dass für den IE6 das DIV mit dem Bild vor dem Link liegt.