如何实现Iframe透明

  第一次发表文章,有什么写不好的地方请多多包涵,另外想借此机会认识一些从事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="不透明" οnclick="turnTransparencyOff()"> <INPUT TYPE="button" VALUE="透明" οnclick="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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值