IE5.5开始支持浮动框架的内容透明。如果想要为浮动框架定义透明内容,则必须满足下列条件。
1.与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true。
2.在 iframe 内容源文档,background-color 或 body 元素的 bgColor 标签属性必须设置为 transparent
<iframe src="./ads_top_tian.html" allowtransparency="true" style="background-color=transparent" title="test" frameborder="0" width="470" height="308" scrolling="no"></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> 现在我们来看一个实例 本例主要是iframe对象的allowTransparency属性应用,在该属性设置为true并且iframe所载加页的背景颜色设置为transparent(透明)时iframe将透明化。 allowTransparency设置或获取对象是否可为透明。 bgColor 设置或获取对象的背景颜色
父页面
<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>
子页面
<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>
其它方法:
框架页文件设置:
<body style="background-color:transparent" > 或 <body bgColor="transparent">
方法一:
<iframe src="about.htm" width="100%" height="100%" align="center" scrolling="auto" frameborder="0" style="filter:chroma(color=#ffffff)" >
</iframe>
缺点:iFrame里的白色的都变透明了。
方法二:(个人推荐使用)
<iframe src="about.htm" width="100%" height="100%" align="center" scrolling="auto" frameborder="0" allowTransparency="true" >
</iframe>
还有其它几个写法,可以比较一下:
<iframe src="about.htm" allowTransparency="true" style="background-color: green"> </iframe >
<iframe src="about.htm"> </iframe >
<iframe src="about.htm" style="background-color: green"> </iframe >
经测试,<body style="background-color:transparent" > + allowTransparency="true" 有效
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛