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

[Matze]

Zitat:

Zitat von alcaeus

Zitat:

Zitat von Matze

Aber nutze die additional comments dafür:

Du meinst conditional comments ;)

:wall: Natürlich. Ich dachte mir schon, irgendwie klingt's komisch. Danke.

[Nils_13]

Ich habe mir das alles nochmal durch den Kopf gehen lassen. Ich finde mittlerweile die JavaScript-Lösung genauso schlecht, als würde ich die Transparenz in die Tonne kippen, da dies bei Leuten, die JavaScript deaktiviert haben, sogar geschieht. Nun habe ich den IE6 durch den IE7 ersetzt und es hat sich nichts geändert. Das freut mich eigentlich sogar. Allerdings stellt sich die Frage, wieso der IE mit seiner eigenen Zeile nichts anfangen kann.... So sieht es aktuell aus:

Code:

#tabs ul
{
  margin         : 0;
  padding        : 50 0 0 0;
  list-style     : none;
  filter         : Alpha(opacity=60);
  opacity        : 0.6;
  -moz-opacity   : 0.6;
  -khtml-opacity : 0.6;
}

Wie kann man rausfinden, ob das Bild überhaupt Alpha unterstützt ? Ich glaube, wir denken zu kompliziert.

[Flare]

Ich habe mal in einem meiner alten Projekte nachgesehen und da habe ich die Opacityangabe für den IE so gemacht:

Code:

filter: Alpha(opacity=60, finishopacity=60, style=1, startx=0, starty=0, finishx=100, finishy=100);

Vielleicht brauch er ja doch noch die extra angaben denn sonst kann ich mir gerade nicht erklären wieso ich die damals mit dazu geschrieben habe.


Flare

[Pfoto]

Hallo Nils_13,


Zum JS-Problem im IE:

Um die Alpha-Transparenz anzuzeigen brauchst du wie schön erwähnt
kein JS -- dies diente nur für den etwas komfortableren Umgang
von transparenten PNGs.

Ich verwende dafür nicht die JS-Libs von Dan Edwards sondern
lade ein J-Script (also von MS) Dokument über "behavior"

So:

Delphi-Quellcode:

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body { behavior: url(HTC/csshover.htc); }
img, a, div, ul, dl { behavior: url(HTC/iepngfix.htc); }
</style>
<![endif]-->

Dies funktioniert bei mir auch bei deaktiviertem Scripting!
Wohl weil es nicht offziell wie andere Scripte eingebunden wird...

Durch diese HTC-Scripte kannst du sogar dem IE < 7 nachträglich
beibringen, dass er die Hover-Pseudoklasse auch auf andere Elemente
anwendet als nur dem Anchor-Element... aber das ist ein anderes Thema

Diese Scripte sind von Angus Turnbull unter http://www.twinhelix.com


Bei mir funktioniert alles tadellos, auch unter IE 7,
der ja nun endlich die PNGs mit Alphatransparenz darstellen kann.


Gruß
Pfoto

[alcaeus]

Moin Nils,

guck dir einfach kurz diese Seite an: http://files.alcaeus.org/transparency.html
So funktioniert es im IE7 perfekt; den IE6 hab ich momentan nicht zum Testen da.

Wegen dem IE7-Script: Hand aufs Herz, wie viele Leute, die noch den IE6 benutzen, wuerden auf die Idee kommen, Javascript zu deaktivieren? Die Zahl haelt sich wohl unter 2%, und denen wirds auch noch egal sein ;)

Greetz
alcaeus

[Nils_13]

Flare: Laut SelfHTML und meinem Apache muss man die anderen Infos nicht angeben. Sie haben bei mir nichts verändert.
Pfoto: Ist durchaus interessant, aber ich empfinde es als hässlich 3 "Sprachen" für eine Homepage zu benutzen (HTML/CSS, PHP, andere Skripte). Und mein Transparenzproblem scheint es nicht zu lösen, soweit ich das gelesen habe, da ich kein transparentes PNG einbinde, sondern das nicht transparente PNG-Bild erst transparent mache. Ich habe es außerdem wenigstens vorrübergehend durch eine JPG ersetzt, da der IE sogar mit Farben bei PNG Probleme hat.
Alcaeus: Bei mir funktioniert deine Codesektion nicht. Mach doch einfach mal was in die DIVs, dann kann ich sehen, ob es ein allgemeines Problem ist oder weg ist, wenn die Homepage online ist. Deine Zeilen, welche ich bei mir eingebaut habe können auch nicht viel verändern, da ich sie schon habe:

Code:

opacity:0.6;
-moz-opacity:0.6;
filter:Alpha(opacity=60);