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 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.
Eventl. werde ich noch eine Demonstration erstellen.
Das ist auch hier zu finden http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
Leider erst ab IE5.5 einsatzfähig :/ ...
Und wie wäre es noch mit einem Beispiel?
P.S. Irgendwo hab ich das doch schon mal gelesen??
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...
War wohl zu spät mit dem Beispiel..:-D
@Tom: Achja dort habe ich es gelesen...
Ich kann die Funktionen der Anweisungen bestätigen. Demo kommt - wie gesagt - noch.
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.
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.
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.
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.
Nun ja, aber eben nach wie vor keine Alphatransparenz, oder? Und die ist für mich eigentlich das wichtigste Argument pro PNG...
AlphaImageLoader müsste eigentlich die Alpha-Transparenz aktivieren.
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...
{ opacity: .8; }
http://www.xhtmlforum.de/viewtopic.php?p=24610#24610
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
Da sieht man mal, was man so alles auf der Arbeit noch lernen kann ;)
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
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.
@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.
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:
<!--[if lt IE 7.]>
kleiner als IE 7
<!--[if gte IE 5.500]>
mindestens IE 5.5 - hier ist AlphaImage-Filter möglich & nötig
<![endif]-->
<!--[if lt IE 5.500]>
kleiner als IE 5
<![endif]-->
<![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).
sorry - ein wenig verwirrt es muss natürlich heissen:
<!--[if lt IE 7]>
kleiner als IE 7
<!--[if gte IE 5.500]>
größer oder gleich IE 5.5 - hier Filter anwenden
<![endif]-->
<!--[if lt IE 5.500]>
kleiner als IE 5.5 - hier kein Filter möglich
<![endif]-->
<![endif]-->
Noch ein ergänzender http://jeenaparadies.net/weblog/2005/feb/png
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/
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
Les bitte den Artikel, bevor du fragst. Genau darum geht es hier nämlich.
Schönes Wochenende.
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
besser spät als nie:
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
hier die vollständige sytax....
@tom: danke, das war auch mein problem.
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
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 :)
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...
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?
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
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
Stimmt. Dieser Hinweis kann einem echt ne Menge Zeit sparen.
Mike
20.02.2006
scheint ja ganz einfach zu gehen ... werd ich mal die nächsten Tage im Einsatz ausprobieren.