CSS: Opacity (Transparenz)

[Nils_13]

Hi,

der IE schluckt bei CSS in der CSS-Datei opacity : 60 nicht. Er schluckt aber so etwas:

Code:

[img]...[/img]

Wenn ich filter:Alpha(opacity=60);opacity:60%; in die CSS-Datei stopfe, schluckt er es nicht. Der FF kommt sogar mit dem Befehl opacity klar. Was muss ich tun, damit es die meisten Browser können ?

[SubData]

Für Firefox musste moz-opacity verwenden, für Microsoft musste filter verwenden und für Opera musste einfach nur opacity verwenden.
Einen Standard gibt es bei CSS2 noch nicht und CSS3 ist noch nicht verabschiedet.

Bedenke: Der Code wird dadurch invalid!

[Nils_13]

Hm, vlt. hilft ja ein halbtransparentes Bild, aber filter bringt bei M$ nichts.

[SubData]

PNG funktioniert im Internet Explorer 5 bzw. 6 nicht.
Und MS ist der einzige Browser, der filter kann, also musst du dich wohl vertippt haben oder ähnliches ;>

[Nils_13]

Der IE kann nichts.... Ich nehm langsam die Meinung an, wer ihn benutzt ist selber schuld, aber das fällt eh auf mich zurück....
MEIN IE kann die Transparenz in keiner Form, der in der Schule hatte mal was transparent.

[Pfoto]

Zur PNGs mit 8 Bit Transparenz:

Wenn du dem IE < 7 explizit sagst, er solle mit Hilfe seines
AlphaImageLoader das PNG laden, dann kann er auch PNGs mit
256-stufiger Transparenz darstellen.

Delphi-Quellcode:

#EineBox {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/Bild_mit_Transparenz.png');
}

Ein kleiner Nachteil ist, dass das Bild nicht CSS-typisch mit repeat-x / -y
wiederholt werden kann, sondern feste Maßen oder Prozentwerte erwartet werden.


Im Internet gibt es auch fertige Lösungen, die es ohne obige
Konstruktion ermöglichen, das PNGs mit 8-bit Transparent im IE < 7
automatisch auch korrekt dargestellt werden.



Gruß
Pfoto

[Die Muhkuh]

Hi,

das hilft dir in meisten Fällen:

http://dean.edwards.name/IE7/

[Nils_13]

Muss ich die passende JavaScript-Datei einbinden und es hat sich erledigt ?

[Matze]

Jupp, bzw. die passenden, je nach dem. Das müssten eine ganze Menge sein in diesem Paket.

Aber nutze die additional comments dafür:

Code:

<!-- [if lte IE 6] >
<script type="text/javascript" src="..."></script>
<![endif] -->

[alcaeus]

Zitat:

Zitat von Matze

Aber nutze die additional comments dafür:

Du meinst conditional comments ;)

Greetz
alcaeus