深入IE、FireFox和Opera浏览器中IFrame背景透明的方法详解

发布时间:2019-08-03编辑:脚本学堂
本文介绍下,实现IE、Firefox与Opera浏览器中,iframe背景透明的方法,有需要的朋友参考下吧。

FireFox中默认iframe背景就是透明的。

IE中要添加allowTransparency="true"属性,例如:

<iframe src="子页面" allowTransparency="true"/>

Opera中需要修改子页面的body,加上属性

style="background:none;"

即可。

子页面:

<body style="background:none;">
<input type="button" value="test" />

关于iframe背景透明的一些补充:

iframe:浮动帧标记 (子页,页中页)。

通常iframe底色会是白色,但如果页面有一个整体的背景色或背景图片时,iframe区域出现一个白色块,与主体页面不协调,这就需要让iframe背景透明。

iframe基本格式:
 

<iframe src="http://www.jb200.com/index.asp" width="num-w" height=" num-h" scrolling="auto" frameborder="0" name="name-iframe" >
</iframe>

设置背景透明的iframe浮动框架,须同时满足两个条件:

一、<iframe>标记的allowTransparency属性值为true,即:<iframe allowTransparency="true">

二、浮动框架链接的源文档的<body>标记的bgcolor属性值为transparent,即:<body bgcolor="transparent">
如parent.html页面嵌入iframe,iframe内链接的页面为son.html
1,父页面 parent.html 
 

复制代码 代码示例:
<HTML>
<HEAD>
<title>如何让iframe背景透明-www.jb200.com</title>
</HEAD>
<BODY bgColor="#EEFFBB">
<TABLE>
<tr><th>
设置背景透明的浮动框架<P></th></tr>
<tr><td>
<IFRAME Src="son.html" allowTransparency="true"></td></tr>
</TABLE>
</BODY>
</HTML>

2,子页面 son.html 
 

复制代码 代码示例:
<HTML>
<HEAD>
<title>子页面_www.jb200.com</title>
</HEAD>
<BODY bgColor="transparent">
脚本学堂,http://www.jb200.com,专业的网站建设、脚本编程、网站编程、系统管理、服务器配置、数据库管理等技术站点。欢迎大家的光临。
</BODY>
</HTML>