The iframe frame sets the white background to transparent in IE browser
|
Recently, I need to frequently use iframe to draw the hierarchical framework of the page in the process of doing the project. Most browsers have no background, but iframe has a white background color by default in IE. When the main background color is not white, it will appear very abrupt in this part. The solution is given in the help manual, which is to set the allowTransparent attribute in the iframe to true. Corresponding examples are also given in the help document, as follows: Copy code The code is as follows:<BODY STYLE="background-color: red"> <IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"> </IFRAME> <IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> </IFRAME> <IFRAME ID="Frame3" SRC="transparentBody.htm"> </IFRAME> <IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </IFRAME> </BODY> Theoretically, there is no problem doing this, but IE doesn't seem to respond much and there is still a white background. In fact, at this step, we also need to add <body bgColor="transparent"> to the <body> tag of the subpage, as shown below: http://img.blog.csdn.net/20140610165850968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva3VucGVuZ19tdWJhbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center main.html main page code: Copy code The code is as follows:<html> <head> <title></title> </head> <body style="background-color:blue;"> <table style="width:100%;border:0;height:100%;cellpadding:0;cellspacing:0"> <tr height="100%"> <td height="100%" width="30%"> <iframe id="test1" src="test1.html" allowTransparency="true" width="100%" height="100%"></iframe></td> <td height="100%" width="40%"> <iframe id="test2" src="test2.html" allowTransparency="true" width="100%" height="100%"></iframe></td> <td height="100%" width="30%"> <iframe id="test3" src="test3.html" width="100%" height="100%"></iframe></td> </tr> </table> </body> </html> test1.html page code: Copy code The code is as follows:<html> <head> <title></title> </head> <body bgcolor="transparent"> <h1>test1</h1> </body> </html> test2.html page code: Copy code The code is as follows:<html> <head> <title></title> </head> <body> <h1>test2</h1> </body> </html> test3.html page code: Copy code The code is as follows:<html> <head> <title></title> </head> <body> <h1>test3</h1> </body> </html> This small example mainly applies the allowTransparency attribute of the iframe tag. When this attribute is set to true and the background color of the <body> tag of the subpage loaded by the iframe is set to transparent, the iframe will become transparent. allowTransparency sets or gets whether the object can be transparent. bgColor Sets or gets the background color of the object. |
<<: Detailed explanation of Nginx passively checking the server's survival status
>>: How to generate mysql primary key id (self-increment, unique and irregular)
Recommend
Several situations that cause MySQL to perform a full table scan
Table of contents Case 1: Case 2: Case 3: To summ...
HTML+CSS to achieve layered pyramid example
This article mainly introduces the example of imp...
Implementation of docker-compose deployment project based on MySQL8
1. First, create the corresponding folder accordi...
Notes on MySQL case sensitivity
Table of contents MySQL case sensitivity is contr...
How to delete garbled or special character files in Linux
Due to encoding reasons, garbled characters will ...
Summary of front-end knowledge in the Gokudō game
background In the early stages of learning Japane...
Detailed explanation of WordPress multi-site configuration under Nginx environment
The multi-site feature of WordPress allows you to...
Example of adding and deleting range partitions in MySQL 5.5
introduce RANGE partitioning is based on a given ...
Detailed explanation on how to modify the default port of nginx
First find out where the configuration file is wh...
JavaScript web form function communication full of practical information
1. Introduction Earlier we talked about the front...
Introduction to container data volumes in Docker
Table of contents Docker container data volume Us...
Introduction to Nginx regular expression related parameters and rules
Preface Recently, I have been helping clients con...
MySQL implements enterprise-level log management, backup and recovery practical tutorial
background As the business develops, the company&...
Standard summary for analyzing the performance of a SQL statement
This article will introduce how to use explain to...
HTML vertical column display text to make the text display in vertical columns
Copy code The code is as follows: <span style=...