Transparenter iFrame – Dafür ist er praktisch: Mit einem transparenten iFrame kann man den Inhalt einer anderen Webseite in die aktuelle Seite einbetten. Ein vorhandenes Hintergrundbild der eigentlichen Webseite ist dabei weiter zu sehen: Da der iFrame mit dieser Methode transparent, also ohne Hintergrundfarbe, ist, sieht man die unten liegende Webseite durch.
Hat diese Webseite ein Hintergrundbild (oder andere hinter dem iFrame liegende Elemente), sieht man diese durch: Sie werden nur verdeckt, wenn der iFrame an den Stellen ebenfalls sichtbare Inhalte enthält. So fällt gar nicht auf, dass die sichtbaren Inhalte von unterschiedlichen Webseiten oder Servern kommen. Für den Nutzer sieht es so aus, als gehörten alle angezeigten Elemente zur gleichen Webseite.
Transparenter iFrame: So geht’s!
Damit der iFrame transparent, also ohne eigenen Hintergrund dargestellt wird, muss man zwei Sachen beachten: Nur dadurch sieht man keine Hintergrundfarbe der eingebetteten Webseite.
- Der iFrame Tag muss den Wert allowtransparency=”true” enthalten
- Die Hintergrundfarbe der in dem iFrame dargestellten Webseite muss auf transparent gesetzt werden
Auf der Webseite, auf der die zweite Seite mittels iFrame eingebunden werden soll, muss der <iframe> Tag mindestens diese Befehle enthalten:
<iframe src="seite-2.html" allowtransparency="true">
</iframe>
Dies sorgt dafür, dass der Hintergrund des iFrame transparent dargestellt werden darf. Damit er aber auch wirklich durchsichtig über der eigentlichen Webseite liegt, muss dies per CSS angegeben werden. Auf der eingebetteten Seite (hier: seite-2.html) muss der Hintergrund transparent gesetzt werden: Das geht entweder direkt in dem Body-Tag:
<body style="background:transparent;">
…oder per CSS für den body:
<style type="text/css">
body { background:transparent; }
</style>