[ZeroKiryu2010]

Hey Leute,

ich habe mehrfachst im Netz gelesen, dass es möglich ist mit der Eigenschaft "filter" einen transparenter Hintergrund im IE zu erzeugen.

Ich habe es sogar schon mal geschafft, allerdings war das mehr eine Glücksache als gekonnt.

Es geht um folgende Zeilen:

background-color: rgb(127, 163, 213);
background-color: rgba(0, 71, 171, 0.4);
filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#660047AB,endColorstr=#660047AB)";
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#660047AB,endColorstr=#660047AB)";

Muss ich irgendwelche Reichenfolgen beachten? Oder sind position-tags zwingend notwendig? Denn diese sind bisher noch rein gar nicht gesetzt. Nach den Webseiten, auf denen ich dieses Hack gefunden habe, ist eine Position-Eigenschaft nicht notwendig.
(siehe: CSS background transparency without affecting child elements, through RGBa and filters - Robert's talk)

Wäre toll, wenn ihr mir helfen könntet, diesen Hack besser zu verstehen.

MFG
ZeroKiryu2010

[heiko_rs]

Erstmal braucht der IE, genauer gesagt IE8-, background-color: transparent, sonst setzt er den Filter auf die Fallback-Farbe und die ganze Konstruktion ist letztlich nicht transparent.

Dann braucht Du die -ms-Zeile nicht, es reicht die ohne Prefix (mit Prefix nur, falls man IE7- ausschließen will).

Was noch dazu sollte: GradientType plus Wert, so dass die komplette Regel z.B. lautet

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#33000000', endColorstr='#33000000');

Für IE7- sollte das Element noch hasLayout bekommen.

position brauchst Du nicht - im Gegenteil, bei manchen filtern kann position für das betreffende Element sogar kontraproduktiv sein, während seine Kinder position brauchen.

Ich würde die IE-Regel übrigens in sein separates CSS schreiben.

[ZeroKiryu2010]

Danke für die Antwort.
Läuft im IE jetzt auch ganz gut. Aber wie sage ich den anderen Browsern, dass sie die Eigenschaft background-color:transparent nicht verwenden sollen. Ist da wirklich eine Einbindung einer CSS via Browserweiche nötig, denn das transparent braucht ja nur der IE für den Filter.

[heiko_rs]

In der Regel bleibt's ja nicht bei einer Regel, denn der IE8- kann nur wenig CSS3.

Im konkreten Fall musst Du den IE8- ansprechen, denn der IE9 kann rgba, braucht hier also keine Hacks. Methoden gibt es mehrere, hier sind einige aufgelistet:
How to target IE7, IE8 and IE9 » Blog | Brian Gelhaus

Ich würde allerdings immer das Extra-CSS per Conditional Comment nehmen, denn ich will mein normales CSS nicht mit Müll aufblasen (der es i.d.R. auch noch invalide macht, wie filter etc.).

[ZeroKiryu2010]

Zitat von heiko_rs

Ich würde allerdings immer das Extra-CSS per Conditional Comment nehmen, denn ich will mein normales CSS nicht mit Müll aufblasen (der es i.d.R. auch noch invalide macht, wie filter etc.).

Guten Argument

Ich dachte die zeit der unterschiedlichen CSS-Dateien sind vorbei, scheinbar war ich da wohl zu optimistisch ^^

[heiko_rs]

Ja und nein - ich persönlich habe immer nur eine einzige CSS-Datei, die auch print und alle responsive-Regeln etc. enthält, aber solange es IE-Versionen gibt, die Nachhilfe oder Korrekturen brauchen, muss man sich halt überlegen, wo man diese unterbringt, und das mache ich dann eben doch per Extra-Datei.