[CSS] Wie kann ich <iframe>'s transparent machen

Status
Nicht offen für weitere Antworten.

Sven Mintel

Mitglied
Transparente iFrames bieten den Vorteil, dass sie sich nahtlos in den Hintergrund des Elterndokumentes einpassen.

In Gecko-Browsern ist dieser Effekt Standard, sofern dort kein Hintergrund-Attribut vermerkt ist.

Der IE kennt zwar den Farbwert "transparent", das Ergebnis ist jedoch nicht das Gewünschte.
Der Workaround dafür sieht folgendermaßen aus:
Man notiert im <iframe>-Tag das attribute allowtrancparency.

Im Dokument, welches im <iframe> erscheint, sind nun noch einige CSS-Angaben vonnöten, um den Hintergrund transparent zu machen.
Man definiert für den <body> über den CSS-Filter Alpha() eine transparente Farbe:
Code:
filter:Chroma(color=#000001);
...diese Farbe sollte nirgends sonst im Dokument vorkommen, auch nicht in Grafiken, denn sie wird von nun an nicht mehr angezeigt.
Um die Sache zu komplettieren, definiert man diese Farbe für den <body> als Hintergrundfarbe.

Damit diese Definition der Hintergrundfarbe nicht von anderen Browsern übernommen wird, verwendet man einen sogenannten "Conditional Comment":
Code:
<!--[if gte IE 5]>
<style type="text/css"> 
body{
  background-color:#000001;
  filter:Chroma(color=#000001);
}
</style>
<![endif]-->
Diese Syntax eines Kommentares kennt nur der IE, andere Browser ignorieren den Inhalt.

Das wars schon.
Anzumerken bliebe allerdings, dass diese Methode sowohl ungültiges HTML(unbekanntes Attribut allowtrancparency), als auch ungültiges CSS erzeugt(ungültiges Attribut Filter)
 

Anhänge

  • 24979attachment.zip
    1,6 KB · Aufrufe: 622
Status
Nicht offen für weitere Antworten.
Zurück