How to set iframe background transparency-JS Tutorial-php.cn

How to set iframe background transparency

高洛峰

Release： 2016-12-24 16:55:10

Original

1290 people have browsed it

IE5.5 starts to support the content transparency of floating frames. If you want to define transparent content for a floating frame, the following conditions must be met.
1. The allowTransparency tag attribute used with iframe elements must be set to true.
2. In the iframe content source document, the bgColor tag attribute of the background-color or body element must be set to transparent

<iframe src="./ads_top_tian.html" allowtransparency="true" style="background-color=transparent" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe>

Copy after login

Of course, the premise is that the color is not set in the iframe page.
In the above we mainly see the code style in style ="background-color=transparent" Through the following four ways of writing IFRAME, I think you should have a clear understanding of how to achieve the background transparency effect of iframe:

<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>

Copy after login

Now let's look at an example
This example is mainly iframe The object's allowTransparency attribute is applied. When this attribute is set to true and the background color of the page loaded by the iframe is set to transparent, the iframe will be transparent.
allowTransparency sets or gets whether the object can be transparent.
bgColor sets or gets the background color of the object

Parent page

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>父页面</title>
</head>
<body bgcolor="#FF0000">
<iframe src="index.htm"  allowTransparency="true"></iframe>
</body>
</html>

Copy after login

Child page

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>子页面</title>
<style type="text/css">
body
{
    background-color: transparent; 
}
</style>
</head>
<body>
</body>
</html>

Copy after login

For more related articles on how to set iframe background transparency, please pay attention to PHP Chinese website!