Der Iframe-Frame setzt den weißen Hintergrund im IE-Browser auf transparent

Der Iframe-Frame setzt den weißen Hintergrund im IE-Browser auf transparent
In letzter Zeit muss ich im Projektverlauf häufig iframe verwenden, um das hierarchische Framework der Seite zu zeichnen. Die meisten Browser haben keinen Hintergrund, aber iframe hat im IE standardmäßig eine weiße Hintergrundfarbe. Wenn die Haupthintergrundfarbe nicht weiß ist, wird es in diesem Teil sehr abrupt angezeigt. Die Lösung finden Sie im Hilfehandbuch. Sie besteht darin, das Attribut „allowTransparent“ im Iframe auf „true“ zu setzen. Entsprechende Beispiele finden Sie auch im Hilfedokument:

Code kopieren
Der Code lautet wie folgt:

<BODY STYLE="Hintergrundfarbe: rot">
<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true">
</IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true"
STYLE="Hintergrundfarbe: grün">
</IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm">
</IFRAME>
<IFRAME ID="Frame4" SRC="transparenterBody.htm"
STYLE="Hintergrundfarbe: grün">
</IFRAME>
</BODY>

Theoretisch ist dies kein Problem, aber der Internet Explorer scheint nicht stark zu reagieren und der Hintergrund ist immer noch weiß. Tatsächlich müssen wir in diesem Schritt auch <body bgColor="transparent"> zum <body>-Tag der Unterseite hinzufügen, wie unten gezeigt:
http://img.blog.csdn.net/20140610165850968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva3VucGVuZ19tdWJhbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

main.html-Hauptseitencode:

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<Titel></Titel>
</Kopf>
<body style="Hintergrundfarbe:blau;">
<Tabelle
Stil="Breite:100%;Rahmen:0;Höhe:100%;Zellenpolster:0;Zellenabstand:0">
<tr Höhe="100%">
<td Höhe="100%" Breite="30%">
<iframe id="test1" src="test1.html" allowTransparency="true" width="100%" height="100%"></iframe></td>
<td Höhe="100%" Breite="40%">
<iframe id="test2" src="test2.html" allowTransparency="true" width="100%" height="100%"></iframe></td>
<td Höhe="100%" Breite="30%">
<iframe id="test3" src="test3.html" width="100%" height="100%"></iframe></td>
</tr>
</Tabelle>
</body>
</html>

test1.html Seitencode:

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<Titel></Titel>
</Kopf>
<body bgcolor="transparent">
<h1>Test1</h1>
</body>
</html>

test2.html Seitencode:

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<Titel></Titel>
</Kopf>
<Text>
<h1>Test2</h1>
</body>
</html>

test3.html Seitencode:

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<Titel></Titel>
</Kopf>
<Text>
<h1>Test3</h1>
</body>
</html>

In diesem kleinen Beispiel wird hauptsächlich das allowTransparency-Attribut des Iframe-Tags angewendet. Wenn dieses Attribut auf true gesetzt ist und die Hintergrundfarbe des <body>-Tags der vom Iframe geladenen Unterseite auf transparent gesetzt ist, wird der Iframe transparent.

allowTransparency legt fest oder ruft ab, ob das Objekt transparent sein kann.
bgColor Legt die Hintergrundfarbe des Objekts fest oder ruft sie ab.

<<:  Detaillierte Erklärung zur passiven Überprüfung des Überlebensstatus des Servers durch Nginx

>>:  So generieren Sie die MySQL-Primärschlüssel-ID (selbstinktive, eindeutige und unregelmäßige)

Artikel empfehlen

Grundlagen der MySQL-Speicher-Engine

Im vorherigen Artikel haben wir über MySQL-Transa...

Realisierung der Echtzeit-Dateisynchronisierung zwischen Linux-Servern

Anwendungsszenarien Bei vorhandenen Servern A und...

Grafisches Tutorial zur MySQL8-Installationsversion

Installation Die erforderlichen Unterlagen finden...

Verwenden Sie den Crontab-Befehl in der Linux-Umgebung, um geplante periodische Ausführungsaufgaben einzurichten [einschließlich PHP-Ausführungscode].

Dieser Artikel verwendet den Befehl crontab in de...

Einführungstutorial zu React Hooks

Zustandshaken Beispiele: importiere { useState } ...

Webstandards – Lernen Sie die Trennung von Struktur und Präsentation zu verstehen

Bei Diskussionen über Webstandards kommt immer wie...

Detaillierte Erläuterung der Werteübertragung von Vue-Eltern-Kind-Komponenten und der Probleme beim unidirektionalen Datenfluss

Inhaltsverzeichnis Vorwort 1. Die übergeordnete K...

Lösung für den Fehler beim Start des MySQL-Dienstes während der Installation von MySQL 5.7.18

MySQL ist eine sehr leistungsfähige relationale D...

Beispiel für eine gespeicherte MySQL-Prozedurmethode zum Zurückgeben mehrerer Werte

Dieser Artikel beschreibt anhand eines Beispiels,...

Wie erreicht MySQL eine Master-Slave-Synchronisierung?

Die Master-Slave-Synchronisierung, auch Master-Sl...

Eine kurze Analyse des Hinzufügens von Listener-Ereignissen bei Wertänderungen in der HTML-Eingabe

Der zu erzielende Effekt In vielen Fällen überwac...

Ausführliches Tutorial zur Installation von MySql 5.6.35 winx64

Hinweis: Beim Projektstart ist kein Fehler aufgru...

uniapp implementiert Datums- und Zeitauswahl

In diesem Artikelbeispiel wird der spezifische Co...

Beispielcode zum Vergleich verschiedener Syntaxformate von vue3

Die Standardvorlagenmethode ähnelt vue2 und verwe...

MySQL-Einschränkungstypen und Beispiele

Zwang Einschränkungen gewährleisten Datenintegrit...