zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Transparenter Hintergrund im IE mit filter

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.05.2013, 18:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.05.2013
Beiträge: 3
ZeroKiryu2010 befindet sich auf einem aufstrebenden Ast
Standard Transparenter Hintergrund im IE mit filter

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:
Code:
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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.05.2013, 21:24
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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

Code:
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.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Geändert von heiko_rs (26.05.2013 um 21:26 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.05.2013, 07:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.05.2013
Beiträge: 3
ZeroKiryu2010 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 27.05.2013, 12:43
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 28.05.2013, 07:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.05.2013
Beiträge: 3
ZeroKiryu2010 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
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 ^^
Mit Zitat antworten
  #6 (permalink)  
Alt 28.05.2013, 13:12
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS3 oder what ever: Transparenter HINTERGRUND Cu Chullain CSS 1 12.10.2009 11:14
Div Orientierung Leonidus CSS 22 30.05.2007 17:05
Frage zu div + filter: alpha Sodie CSS 2 29.12.2006 21:17
transparenter .gif /.div hintergrund über body textur (.jpg) zackmccracken CSS 3 04.07.2006 13:37
scheinbar transparenter hintergrund ratterobert CSS 2 10.06.2004 23:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:55 Uhr.