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

Implementierung der Einbindung eines freigegebenen NFS-Verzeichnisses in einen Docker-Container

Zuvor wurde unter https://www.jb51.net/article/20...

So erstellen Sie einen Redis-Cluster mit Docker

Inhaltsverzeichnis 1. Erstellen Sie ein Redis-Doc...

jQuery verwendet das Canvas-Tag, um den Bestätigungscode zu zeichnen

Das <canvas>-Element ist für clientseitige ...

Verwendung des offiziellen MySQL-Exporttools mysqlpump

Inhaltsverzeichnis Einführung Anweisungen Tatsäch...

Analyse und Lösung des Grundes, warum das Frameset-Tag in HTML nicht normal angezeigt werden kann

<frameset></frameset> ist jedem bekann...

Detaillierte Schritte zum Ändern des Standardkennworts bei der Installation von MySQL in Ubuntu

Schritt 1: Geben Sie das Verzeichnis ein: cd /etc...

CSS-Beispielcode mit Suchnavigationsleiste

Dieser Artikel zeigt Ihnen, wie Sie mit CSS eine ...

Auswahl der Groß-/Kleinschreibung von MySQL-Tabellennamen

Inhaltsverzeichnis 1. Parameter, die die Groß-/Kl...

JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts

JavaScript-Umschalteffekt für Bekleidungsalben (ä...

W3C Tutorial (11): W3C DOM Aktivitäten

Das Document Object Model (DOM) ist eine Plattfor...

Linux 6 Schritte zum Ändern der Standard-Remote-Portnummer von SSH

Der Standard-SSH-Remote-Port in Linux ist 22. Man...

LayUI+Shiro implementiert ein dynamisches Menü und erinnert sich an das Beispiel der Menüerweiterung

Inhaltsverzeichnis 1. Maven-Abhängigkeit 2. Menüb...

JS ES: Neue Funktion zur variablen Entkopplungszuweisung

Inhaltsverzeichnis 1. Entkoppelte Zuweisung von A...

Detaillierte Erläuterung der MySQL Innodb-Speicherstruktur und der Speicherung von Nullwerten

Hintergrund: Tablespace: Alle INNODB-Daten werden...

Mysql GTID Mha-Konfigurationsmethode

Gtid + Mha + Binlog-Serverkonfiguration: 1: Testu...