21. Februar 2006 in Journal » XHTML/CSS

Transparenz und Anzeige von PNG im Internet Explorer

Bis heute war mir nicht bekannt, dass es möglich ist, per CSS Elemente auch Transparenz zuzuweisen, sodass es der Internet Explorer versteht. Auch das PNG-Bilder können im Internet-Explorer korrekt angezeigt werden, war mir unbekannt. Doch nun bin ich schlauer und stelle euch die gegebenen Möglichkeiten vor.

Transparente Container

Container, wie div oder li können in allen Browsern eine Transparenz erhalten.


#container {

  filter:Alpha(opacity=80);

 opacity:80%;

}

Die erste Eigenschaft dient nur dazu, die Transparenz für den IE festzulegen. Die 2. wiederum ist für alle anderen Browser da.

Transparente PNG-Bilder

Transparente PNG Bilder können auch im Internet Explorer genutzt werden. Wenn wir von einer Navigation #nav ausgehen, und die Links beim :hover-Zustand den transparenten Hintergrund bekommen sollen, geht man wie folgt vor:


#nav a:hover {

  filter:

  progid:DXImageTransform.Microsoft.AlphaImageLoader

  (src='images/nav_hover.png');

}



html > body #nav a:hover {

  background: url(images/nav_hover.png);

}

Die Eigenschaft filter erhält einen Wert, der anscheindend nur für ~~Microsofts Unfall~~ den Internet Explorer verständlich ist. ANdere Browser bleiben unberührt. Die 2. Anweisung dient dazu, den Hintergrund nur die fähigeren Browser als wirklichen background zuzuteilen.

Hat dir der Artikel gefallen?

Abonnier’ den RSS-Feed

38 Kommentare

Mike am 21. Februar 2006 #

scheint ja ganz einfach zu gehen ... werd ich mal die nächsten Tage im Einsatz ausprobieren.

Martin Labuschin am 21. Februar 2006 #

Eventl. werde ich noch eine Demonstration erstellen.

reieRMeister am 21. Februar 2006 #

Das ist auch hier zu finden http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Leider erst ab IE5.5 einsatzfähig :/ ...

Gaba am 21. Februar 2006 #

Und wie wäre es noch mit einem Beispiel?

P.S. Irgendwo hab ich das doch schon mal gelesen??

Tom S. Weber am 21. Februar 2006 #

Bist du dir ganz sicher, dass es funktioniert?
Denn ich glaube, dass man es bei Hintergrundbilder nicht anwenden kann, soviel ich weiss...

@Gaba:
Ich hatte es kürzlich auf meinem Blog...

Gaba am 21. Februar 2006 #

War wohl zu spät mit dem Beispiel..:-D

Gaba am 21. Februar 2006 #

@Tom: Achja dort habe ich es gelesen...

Martin Labuschin am 21. Februar 2006 #

Ich kann die Funktionen der Anweisungen bestätigen. Demo kommt - wie gesagt - noch.

John am 21. Februar 2006 #

Demo hier:

www.mandarindesign.com/opacitycolor.html

Auch wenns nur am Rande interessiert ist vielleicht noch anzumerken, daß das CSS dadurch natürlich invalide wird.

Sicherlich zu verschmerzen, wenns darum geht dem IE daß Laufen beizubringen. Zumindest um keine Validierungsfehler zu erzeugen, macht sich in dem Fall ein separates Stylesheet für den IE (nur mit den betreffenden Ergänzungen) und Einbindung per Conditional Comments recht nett.

Martin Labuschin am 21. Februar 2006 #

Danke für deine Ergänzung. Ich denke auch, dass man sich 1-2 Validierungs-Fehler erlauben darf, solange noch alles funktioniert.Deine Methode, ein Extra-Stylesheet nur für den IE, ist eine gute Idee.

SilentWarrior am 21. Februar 2006 #

Martin, eine Frage: Warum müssen zur "normalen" Definition der Transparenz bzw. der transparenten PNG-Bilder Child-Selektoren verwendet werden? Der IE versteht diese Anweisungen ja sowieso nicht, also könnte man sie doch theoretisch in den gleichen Selektor packen.

Martin Labuschin am 21. Februar 2006 #

Bei PNG Hintergründen ist es wichtig, es für den IE auszublenden, da er sonst den Hintergund des PNG wieder auf dieses grau setzt und somit die Transparenz futsch ist. Bei normalen Containern kann man es sich aber sparen. Danke für den Hinweis, habs verbessert.

Birgit am 21. Februar 2006 #

Nun ja, aber eben nach wie vor keine Alphatransparenz, oder? Und die ist für mich eigentlich das wichtigste Argument pro PNG...

Martin Labuschin am 21. Februar 2006 #

AlphaImageLoader müsste eigentlich die Alpha-Transparenz aktivieren.

Boris am 21. Februar 2006 #

Ich stelle beim Testen gerade einen merkwürdigen Effekt fest:
Im Firefox (1.5.0.1) funktioniert bei mir die Angabe "opacity:80%;" gar nicht. Nur wenn ich die Dezimalschreibweise wie im Mandarin-Design-Beispiel verwende, zeigt das Browserlein Transparenz an: "opacity:.80;". Höchst merkwürdig...

ulle am 21. Februar 2006 #

{ opacity: .8; }

http://www.xhtmlforum.de/viewtopic.php?p=24610#24610

ulle am 21. Februar 2006 #

Ich habe es nun getestet und kann bestätigen dass es ein echter alpha-Kanal ist!

Wenn der MS-Filter in einem externen CSS mit Conditional Comments (http://www.xhtmlforum.info/wiki/index.php/Conditional_comments ) versteckt wird, dann sieht es auch nicht der CSS-Validator.

p.s. warum mein erster Kommentar 2 mal erscheint ist mir nicht klar - sorry

Kristof Dreier am 22. Februar 2006 #

Da sieht man mal, was man so alles auf der Arbeit noch lernen kann ;)

ulle am 22. Februar 2006 #

Innerhalb des XHTMLFORUM wurden noch weitere Informationen, insbesondere im Bezug zum IE7, zusammen getragen und ein TEST-Case hinterlegt ;-)

http://www.xhtmlforum.de/viewtopic.php?t=7658

Matthias am 22. Februar 2006 #

Zur Info:

MS Internet Explorer 6.0 SP2 kann PNG Alphakanal Transparenzverläufe, aber nicht normale PNG Transparenz wie beim GIF-Format.

MS Internet Explorer 7.0 beta 1 und beta 2 können beide PNG Alphakanal Transparenz mit Verläufen und normale PNG-Transparenz.

Ein Test hierfür kann mit Vergleich zum GIF-Format kann auf http://www.aadmm.de/de/gf.htm durchgeführt werden.

John am 22. Februar 2006 #

@Matthias

Hab grad (sicherheitshalber) noch mal mit dem IE 6.0 SP 2 getestet. Er kann auch keine Verläufe darstellen. Deine Testgrafiken verlaufen nicht von blau zur Hintergrundfarbe der Webseite, sondern von blau nach türkis.

Soweit es im http://blogs.msdn.com/ie/archive/2005/04/26/412263.aspx IEBlog nachzulesen ist, wurden die Funktionen zur Alphatransparenz erst für den IE 7 völlig neu und erstmalig geschrieben.

cre-aid am 22. Februar 2006 #

Der AlphaImageLoader is mir schon länger bekannt, benutze den selbst öfters über conditional comments in der jetzigen Situation wäre das also um genau zu sein:


<![endif]-->

Bei der Verwendung sollte man jedoch berücksichtigen, das dieser filter nicht bei sich wiederholenden Hintergrund-png's funktioniert. Die Png's wiederholen sich dann nämlich nicht mehr ;-)

Und wenn die png's als Links verwendet werden, wird es passieren, dass sie nicht mehr klickbar sind das kann man durch: position:relative im css beheben (wieder son blöder IE bug).

cre-aid am 22. Februar 2006 #

sorry - ein wenig verwirrt es muss natürlich heissen:




<![endif]-->

Jeena Paradies am 24. Februar 2006 #

Noch ein ergänzender http://jeenaparadies.net/weblog/2005/feb/png

okuehn am 25. Februar 2006 #

Nur so zur Info, es gibt ein Tool mit dem man den bKGD-Chunk (backgroundColor) einer PNG setzen kann (default wird dieser normalerweise nicht gesetzt) d.h. der Internet Explorer stellt anstatt dem default-grau die eingestellte Farbe dar. Das Tool heißt TweakPNG und erlaubt auch andere nützliche Chunk-Änderungen: http://entropymine.com/jason/tweakpng/

Graccem am 10. März 2006 #

Die Transparenz funktioniert auch bei sich wiederholenden PNGs. Man muss nur darauf achten, dass eine Breite bei dem Element angegeben wird in dem das PNG erscheinen soll.

sam am 23. März 2007 #

hallo jungs,

ich brauche eine hilfe, und zwar habe eine seite www.aero-gym.ch
die beim internet explorer einfach nicht so erscheint wie beim firefox
was kann ich jetzt tun? habe zwar gelesen das man mit einem einfachen trick die png und transparente bilder anzeigen kann.

Doch mein Problem ist jetzt, wo muss ich den code reinbasteln.
meine css datei ist separat codiert worden und wurde im html eingebunden.

Kann mir jemand helfen, ich wäre sehr dankbar!

s.s

Martin Labuschin am 23. März 2007 #

Les bitte den Artikel, bevor du fragst. Genau darum geht es hier nämlich.

Schönes Wochenende.

Tom am 30. März 2007 #

So einen Tip hatte ich schon lange gesucht und gleich ausprobiert. Klappt prima, wenn man auch die Pfad-Angaben beachtet!!

Normalerweise geht man von dem Pfad relativ zur CSS Datei aus. Dies ist aber falsch (viell. bin ich der einzige der diesen Fehler gemacht hat=!), richtig ist es den relativen Pfad zur anzeigenden Datei, die das CSS inkludiert, angeben.

Tom

Username am 8. Mai 2007 #

besser spät als nie:

filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;

hier die vollständige sytax....

captain cord am 16. Mai 2007 #

@tom: danke, das war auch mein problem.

Lisa am 4. Juli 2007 #

ich bin ein kompletter anfänger was webseiten betrifft. habe auch schon viel recherchiert zum thema png und transparenz, nur leider verstehe ich die meisten beiträge zu diesem thema nicht richtig bzw. weiß nicht, wo ich was einbauen soll. ich wäre euch dankbar, wenn ihr euch mal meine seite anschauen könntet. alle tranparenzen sind png-dateien; auch die buttons. vllt habt ihr ja eine idee: www.ensemble-design.de

Martin Labuschin am 4. Juli 2007 #

Zuerst einmal empfehle ich dir, die Navigation auf Textbasis umzusetzen. Dadurch würden sich die PNG-Probleme von ganz alleine lösen. Danach wäre es für die Wartbarkeit und Ladezeit eurer Website ratsam, den aufgeblähten Code von Grund auf zu reinigen. Vielleicht liesst du dir mal den folgenden Artikel durch: http://labuschin.com/journal/webstandards/grnde-fr-webstandards_basiertes-webdesign

Des weiteren habe ich einen kleinen typografischen Fehler bei dir endeckt: Man kann deine (fälschlicherweise punktierten) Überschriften gar nicht vom normalen Fliesstext unterscheiden.

Ich hoffe ich konnte dir helfen :)

Lisa am 4. Juli 2007 #

danke für deine schnelle antwort, martin! wenn ich die navigation auf textbasis machen würde, könnte ich dann auch einen schatten dahinter legen? und was ist dann mit der typo? soll auf jeden fall in der navi die syntax sein..
deinen entdeckten fehler mit der punktierten (?) überschrift versteh ich leider nich so ganz...

Martin Labuschin am 4. Juli 2007 #

Auf den Schatten wirst du wohl verzeichten müssen. Dafür ist die Schrift skalierbar und kann auch von Suchmaschinen erfasst werden. Deine Besucher werden dir danken. Und der IE macht auch mit ;)

Man punktiert keine Überschriften. Und man kann die Überschrift nicht vom Fliesstext unterscheiden. Vielleicht reicht es, wenn du sie einfach größer oder fetter machst (und sie als echte Übershcirft auszeichnest).

Mit welchem Editor hast du die Website erstellt, Lisa?

Benjamin am 9. August 2007 #

möchte anmerken, dass bei dieser Methode nicht der relative Pfad von der CSS-Datei zum png angegeben werden muss, sondern von der html -datei, in welcher das Bild angezeigt werden soll.
Deswegen würde ich auch einen absoluten Pfad empfehlen

Benjamin am 9. August 2007 #

Martin Labuschin am 9. August 2007 #

Stimmt. Dieser Hinweis kann einem echt ne Menge Zeit sparen.

Diskussion geschlossen

Die Kommentarfunktion dieses Artikels wurde deaktiviert. Private Mitteilungen an Martin bitte per E-Mail an martin@labuschin.com. Danke.