iframe背景透明的办法

2011年11月3日 发表评论 阅读评论

如何让iframe里的文件背景透明?怎么样设置让ie6 iframe背景色透明。我们用Iframe的时候有时可能需要让iframe里的东西背景透明,这时候可以用到下面的东西!

在嵌入iframe的页面中:
<iframe src="abc.htm" name="iframe" width="540" height="400" scrolling="Auto" frameborder="0" id="iframe" style="border:0px" allowtransparency="true"></iframe>

在iframe的页面中:
<body STYLE="background-color: transparent">
=============---------------------==========================
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; }


转载请注明来自:[Craigslist中文网站]http://craigslist.shandian.biz/19.html

分类: 天涯八卦 标签:
  1. 本文目前尚无任何评论.