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

Netzwerkmanagement und Netzwerkisolationsimplementierung von Docker-Containern

1. Docker-Netzwerkverwaltung 1. Docker-Container-...

Lösung für vergessenes Linux MySQL-Root-Passwort

Wenn Sie sich bei der Verwendung der MySQL-Datenb...

$nextTick-Erklärung, die Sie auf einen Blick verstehen

Inhaltsverzeichnis 1. Funktionsbeschreibung 2. Üb...

So fügen Sie Konfigurationsoptionen zum Discuz!-Forum hinzu

Discuz! Forum verfügt über zahlreiche Konfiguratio...

So verwenden Sie Docker zum lokalen Verpacken und Bereitstellen von Images

Erste Verwendung von Docker zum lokalen Verpacken...

Analyse und Lösung des a.getAttribute(href,2)-Problems in IE6/7

Kurzbeschreibung <br />In IE6 und 7 wird in...

React-Internationalisierung react-i18next ausführliche Erklärung

Einführung react-i18next ist ein leistungsstarkes...

Diagramm des Tutorials zum Herunterladen und Installieren von MySQL8.0 für Win10 64-Bit

Wie lade ich MySQL von der offiziellen Website he...

So legen Sie den Rahmen einer Webseitentabelle fest

<br />Zuvor haben wir gelernt, wie man Zelll...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12

Notieren Sie die Installations- und Konfiguration...

Detaillierte Schritte zur vollständigen Deinstallation von MySQL 5.7

Dieser Artikel fasst hauptsächlich verschiedene P...

Eine kurze Analyse der asynchronen DOM-Aktualisierung von Vue

Inhaltsverzeichnis Das Prinzip der asynchronen DO...

Im A-Tag befinden sich Text und Bilder. Wie kann ich den Text ausblenden und nur das Bild anzeigen?

Oftmals werden Sie auf einen <a>-Tag-Stil s...

Detailliertes Verständnis von umask in den neuen Linux-Dateiberechtigungseinstellungen

Vorwort Der Ursprung ist Frage 1: Wenn Ihre Umask...

Welche magischen Anwendungen haben CSS-Filter?

Hintergrund Grundlegende Konzepte CSS filter wend...