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>
Zitatende
Die eigentliche Website muss auch keinen transparenten Hintergrund haben, sondern dem iframe muss Transparenz erlaubt werden (allowtransparency=true) und die eingebettete Seite (in meinem Fall https://stationsweb.awekas.at/index.php?id=15927) muss einen transparenten Hintergrund haben, und zwar nicht ein tranparentes .png-Bild sondern ein Style-Attribut body background:transparent; - dies müsste allerdings jemand von euch programmieren bzw. eben die entsprechende Option bereitstellen, da ich auf https://stationsweb.awekas.at/index.php?id=15927 keinen Einfluss habe, außer das Hintergrundbild ändern zu können. Also: Kein Hintergrundbild, keine Farbe, nur Transparenz.
