Home > Article > Web Front-end > How to set iframe background transparency

How to set iframe background transparency

高洛峰Original: 2016-12-24 16:55:101252browse

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>

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>

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>

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Simple example of onclick event in DIV dynamically added by jsNext article：Simple example of onclick event in DIV dynamically added by js

See more

How to set iframe background transparency

Related articles