Der Internet Explorer 7 untersützt alphatransparente PNG-Bilder. Habe ich zumindest bis dato gedacht. Leider zeigt der IE auch hier wieder sein wahres Gesicht, sobald man damit etwas mehr machen möchte.
Alphatransparente PNG Bilder funktionieren nicht im Internet Explorer 6. Das ist bekannt und dafür gibt es auch einen PNG-Fix. Der Internet Explorer 7 hingegen zeigt PNG-Bilder korrekt an.
Das habe ich zumindest bis dato gedacht. Nun habe ich solches PNG-Bild in eine Seite eingebunden und wollte es transparent anzeigen lassen.
Also abgesehen von der Transparenz, die dieses Bild eh schon besitzt (nämlich beim Schatten am rechten und unteren Rand) hatte ich vorgehabt mit dem opacity-Befehl das komplette Bild durchsichtiger zu machen.
Hintergrund der Aktion ist es, dass ein Icon wie dieses Bestandteil eines Buttons/Knopfes ist und ich den kompletten Button nur noch zu 40% angezeigt haben wollte, wenn man ihn deaktiviert hat.
Der Quellcode für Firefox, Safari, Chrome, Opera und jedem anderen Browser der nicht von Microsoft ist sieht so aus:
.disabled {
opacity:0.4;
}
1 wäre 100% (also Standard) und 0 wäre komplett durchsichtig (also unsichtbar) und 0.4 entspricht in diesem Falle 40% der verbleibenden Sichtbarkeit.
Gut das auch der Internet Explorer 7 diesen Befehl nicht kennt, damit hätte ich mich abfinden können. Es gibt ja eine entsprechende Alternative:
Und man mag es kaum glauben, sie funktioniert auch. Nur wie!
IE7 mag keine transparenten, alphatransparenten PNG-Bilder
Das sieht man an folgendem Vergleich sehr eindrucksvoll. Während der Firefox (sowie alle anderen Browser) das PNG immer noch super darstellen, hat der Internet Explorer 7 (rechts) massive Schwierigkeiten mit der Darstellung des doppelt-transparentem Schattens.
JavaScript das gleiche Problem
Auch die Verwendung von JavaScript hat eben dieses Problem aufkommen lassen. Es hat nichts genützt den Opacity-Wert darüber zu verändern. In jQuery sähe der Code dafür übrigens so aus:
$(".disabled").css("opacity", "0.4");
Nur nochmal als kleine Ergänzung zu meinem Artikel von gestern :)
Lösung?
Die einzige Lösung die sich mir erschlossen hat - vielleicht kennt ihr aber noch eine andere - ist das Bild vom Bildbearbeitungsprogramm aus schon mit 40% Transparenz abzuspeichern. Im Prinzip so, dass man das Bild doppelt vorliegen hat. Einmal mit 100% und einmal mit 40%.
So kann man je nach Bedarf das Bild verwenden, das man darstellen möchte.
Der Nachteil daran ist, dass es alles sehr umständlich macht, da immer alles doppelt abgespeichert werden muss und auch alles doppelt so viel Speicher verbraucht. Daher hoffe ich, dass ich eine andere Lösung für das Problem finden kann.
Kommentare (9)
Letzte Aktualisierung ( Mittwoch, 28. Januar 2009 )
Das habe ich zumindest bis dato gedacht. Nun habe ich solches PNG-Bild in eine Seite eingebunden und wollte es transparent anzeigen lassen.
Kommentare (9)
