Recently, I need to frequently use iframe to draw hierarchical frameworks for pages during project work. Most browsers do not have backgrounds, but iframes have a white background color by default in IE. When the main background color is not white, it will appear abrupt in this part. The solution is given in the help manual, that is, set the allowTransparent property in the iframe to true, and you can do it. The corresponding examples are also given in the help documentation, as follows:
Copy the 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>
In theory, there is no problem doing this, but IE doesn't seem to have a big reaction and still has a white background. In fact, at this point, we still need to add <body bgColor="transparent"> to the <body> tag of the subpage. The example is as follows:
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 the 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;cellpacing: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 the code
The code is as follows:
<html>
<head>
<title></title>
</head>
<body bgcolor="transparent">
<h1>test1</h1>
</body>
</html>
test2.html page code:
Copy the code
The code is as follows:
<html>
<head>
<title></title>
</head>
<body>
<h1>test2</h1>
</body>
</html>
test3.html page code:
Copy the code
The code is as follows:
<html>
<head>
<title></title>
</head>
<body>
<h1>test3</h1>
</body>
</html>
This small example is mainly the allowTransparency property application of the iframe tag. When the property is set to true and the background color of the <body> tag of the subpage loaded by the iframe is set to transparent (transparent).
allowTransparency sets or gets whether the object can be transparent.
bgColor Sets or gets the background color of the object.