如何实现Iframe透明

来源：互联网发布：大学生交友软件编辑：程序博客网时间：2024/05/18 22:50

　　第一次发表文章，有什么写不好的地方请多多包涵，另外想借此机会认识一些从事WEB设计的朋友，tangzehuan@sohu.com QQ 37878073
　　IE5.5和NN6以上的浏览器支持　Frame　，Iframe对象的allowTransparency　方法，如果某对象的背景颜色设置为Transparency的，它将继承包含它容器的特性。我们可以通过这个特性实现透明背景的开／关。

　　点击这里查看效果

代码如下：

a.html如下：

<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY style="BACKGROUND-COLOR: transparent">
<H1>透明文档</H1>
<P>此IFRAME无背景颜色</P>
<P>BODY：<br><BODY STYLE="background-color:transparent"></P></BODY></HTML>

b.html如下：

<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY style="BACKGROUND-COLOR: transparent">
<H1>透明文档</H1>
<P>此IFRAME 设为绿色。</P>
<P>BODY： <br><BODY STYLE="background-color:transparent"></P></BODY></HTML>

如果a.html透明的，它将继承IFRAME的背景颜色如果容器IFRAME也是透明的，a.html将继承Iframe的父容器的颜色，如果一个对象不透明，它将覆盖其容器的颜色，默认是透明的。

Internet Explorer 5.5 以上版本允许你设置透明属性，通过设置是否可被透明，你可以改变背景的颜色。［在不设置透明属性的情况下，默认背景颜色为白色］

IFRAME定义如下：

<IFRAME ID="frame1" SRC="a.html" allowTransparency="true" HEIGHT=180 WIDTH=300> </IFRAME> <IFRAME ID="frame2" SRC="b.html" allowTransparency="true" STYLE="background-color:#459800" HEIGHT=180 WIDTH=300> </IFRAME>

按钮定义如下：

<INPUT TYPE="button" VALUE="不透明" onclick="turnTransparencyOff()"> <INPUT TYPE="button" VALUE="透明" onclick="turnTransparencyOn()">

<script>
//函数turnTransparencyOff()：

function turnTransparencyOff()
{ document.all.frame1.allowTransparency = false; document.all.frame2.allowTransparency = false; }

//函数turnTransparencyOn()：

function turnTransparencyOn()
{ document.all.frame1.allowTransparency = true; document.all.frame2.allowTransparency = true; }
</script>