Forum
Tipps
News
Frage stellen
search
Menu-Icon
search

Transparenter iFrame mit HTML und CSS


  1. Computerhilfen
    2. ›
  2. Info
    3. ›
  3. Webmaster

danke
1 Leser hat sich bedankt
Bewerten
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (Durchschnitt: 4,00 von 5 – 1 Stimme(n)) - Fehler: Nicht angemeldet!
Loading...

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.

  1. Der iFrame Tag muss den Wert allowtransparency=”true” enthalten
  2. 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>


Fragen zu diesem Tipp? In unserem Webmaster-Forum helfen wir weiter!





Ähnliche Fragen:

» Top Tipps: Diese Tipps sind heute beliebt
Passende Wörter im Lexikon:
CSS
CSS ist die Abkürzung für Cascading Style Sheets, eine Beschreibungssprache im Internets, die für die visuelle Gestaltung von Webseiten verantwortlich ist....

Tag
Ein Tag ist ein englischer Begriff und bedeutet so viel wie Etikett, Mal, Marke, Auszeichner und Anhänger. Generell ist Tag eine Auszeichnung eines Datenbetandes mit...



Mehr Tipps zu Transparenter iFrame mit HTML und CS...


© Computerhilfen.de (15988x gelesen)
Transparenter iFrame mit HTML und CSS