Über mich

Startseite arrow Tipps & Tricks arrow Internet Explorer 7 und die Transparenz (Opacity)

Internet Explorer 7 und die Transparenz (Opacity)

Mittwoch, 28. Januar 2009
Geschrieben von Armin Vieweg
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.



PNG-24 Beispiel IconDas 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:

.disabled {
  opacity:0.4;
  filter: alpha(opacity=40);
}


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.
PNG-24 mit doppelter Transparenz im Einsatz

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)
 1 Geschrieben von: Mecki, am 05.02.2009 um 17:20
Dankeschön! Schon seltsam dass es unter Vista soviel grafischen Schnickschnack gibt, aber selbst der IE8 (Beta) noch das von dir geschilderte Problem hat.
 2 Geschrieben von: Armin Vieweg, am 05.02.2009 um 20:32
Oh... das ist ja doof. Ich hab schon gehofft, dass Microsoft das Problem zumindest in der 8er Version beseitigt hätte. 
 
Danke, dass Du das nochmal explizit im IE8 getestet hast. 
 
Gruß 
Armin
 3 Geschrieben von: Pete, am 08.02.2009 um 16:42
Schade eigentlich. Warum ist es denn für Microsoft so schwer die einfachsten Dinge in den Browser zu implementieren.
 4 Geschrieben von: Stephan E., am 26.02.2009 um 19:56
Ein setzen der background-color auf dem entsprechenden Bild löst das Opacity Problem, führt allerdings auch dazu, dass man das PNG nirgendwo anders (zumindest nicht wenn man die Hintergrundfarbe nicht kennt oder sie nicht unifarben ist) drüber legen kann... 
 
Nach einigem herumprobieren hat mich folgendes Css/HTML Konstrukt weitergebracht. 
 
 
 
 
 
#wrapper { 
zoom:1; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); 

#image { 
filter:progid:DXImageTransform.Microsoft. Gradient(gradientType=1,startColorStr=#00FFFFFF,endColorStr= #00FFFFFF); 

 
Zoom:1 für das hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html). Der Opacity muss auf einem umliegenden Container sein. Der Gradient Filter dient dazu den background-color Effekt hervorzurufen (background-color:transparent wäre nämlich zu einfach gewesen, und funktioniert daher nicht)... 
 
Wollte diese Lösung nicht vorenthalten, da ich sie auch lieber im Inet gefunden hätte, als selbst herumzuprobieren.. :) 
 
Getestet unter Vista64 im IE7 :)
 5 Geschrieben von: Stephan E., am 26.02.2009 um 16:45
Hier der HTML Code nochmal ( durch [] ersetzt) 
 
[div id="wrapper"] 
[img id="image"] 
[/div]
 6 Geschrieben von: Dirk S., am 18.08.2009 um 15:13
Alternativ kann man auch das ganze Bild im IE-proprietary Style laden. 
Das könnte dann am Ende so aussehen: 
 
#ie_image 

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png', sizingMethod='crop'); 

 
#browser_image 

background: Transparent url('bild.png') no-repeat center; 

 
#wrapper 

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); 
opacity: 0.4; 
-moz-opacity: 0.4; 

 
Das hab ich jetzt nur aus dem Kopf aufgeschrieben und gebe keine Garantie dass es semantisch richtig ist. Aber ein mit AlphaImageLoader geladenes Bild das ein Elternelement hat das wiederum den Alpha-Filter hat wird auch im IE7 richtig geladen. 
 
Grüße
 7 Geschrieben von: Davor I., am 08.07.2010 um 00:30
hi, 
 
da du ja gemeint hast das du das bild doppelt abspeichern musst habe ich dafür wenigstens eine schönere lösung. 
 
Einfaches CSS per hover da es ja sowieso buttons sind kannst du diese ja in einem bild definieren und mit "bacground-position" und der eigenschaft ":hover " trixen das heisst du hasst ein gemeinsames bild was du aber nur hin und her bewegst mit der position. somit erreichst du auch das alle bilder die du als buttons oder backgrounds in einem verschachtelst und ein gesamtes bild geladen wird und es müssen nicht immer einzelne bilder geladen werden. 
 
hoffe das war verständlich
 8 Geschrieben von: Armin Vieweg, am 08.07.2010 um 09:46
Hallo Davor, 
 
Du meinst vermutlich Sprites. Ja so könnte man es natürlich machen. Aber der Beitrag diente mehr dem Klarmachen, dass der IE die doppelten Transparenzen nicht kann.  
 
Das Prinzip von Sprites habe ich hier mal erklärt: 
/html/hover-und-background-images-im-ie6.html 
 
Das wäre dann genau das, was Du eben erklärt hast =D 
 
Gruß 
Armin
 9 Geschrieben von: M, am 31.05.2012 um 15:22
fireworks png 8
Letzte Aktualisierung ( Mittwoch, 28. Januar 2009 )
 
< Zurück   Weiter >