如何实现Iframe透明

原创 2002年12月12日 09:22:00

  第一次发表文章,有什么写不好的地方请多多包涵,另外想借此机会认识一些从事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>

如何让iframe背景色透明

框架页文件设置:  或  方法一: 缺点:iFrame里的白色的都变透明了。 方法二:(个人推荐使用) 还有其它几个写法,可以比较一下:         经测...
  • ranbolwb
  • ranbolwb
  • 2013年11月11日 18:15
  • 9892

如何让一个IFRAME调用页面的背景为透明

IE6中iframe默认背景色为白色,就算在iframe页写背景色透明也不行,本来以为很好解决,没想到自己想的太简单了,还是到网上搜了一个下解决方法~ 因为想通过IF...
  • HUXU981598436
  • HUXU981598436
  • 2015年01月14日 16:10
  • 1567

iframe 背景设透明 国内某浏览器 为白色解决办法

今天与同事做滚屏的一个测试,
  • yageeart
  • yageeart
  • 2014年05月23日 17:13
  • 1141

如何让iframe透明

如何让iframe透明????? (2008-05-22 22:33:52) var $tag=iframe,背景,父框架,透明,网页,it; var $tag_code=9ce...
  • lingxyd_0
  • lingxyd_0
  • 2008年11月07日 11:08
  • 2319

解决ie8下的iframe背景不透明为白色的问题

 'background-color' 特性的默认值为 ''''transparent'''',即透明;但是IE6/IE7/IE8中 BODY 元素的背景色不是 transparent,而是 #...
  • qq_35052627
  • qq_35052627
  • 2016年12月26日 13:34
  • 1632

iframe里的背景透明如何解决呢,下面的代码能帮到你!

iframe里的背景透明如何解决呢,下面的代码能帮到你! 我们在设计网页的时候常常会遇到这种情况,在绚丽的网页背景上做半透明效果,然后加个IFRAME,想让IFRAME的背景变成透明的以适应整体网页...
  • tstec
  • tstec
  • 2011年10月23日 19:50
  • 2399

设置iframe背景色透明

设置iframe背景色透明
  • liuqian34761
  • liuqian34761
  • 2011年02月27日 16:38
  • 3115

7、如何实现透明传输

透明传输的基本概念: 数据透明传输就是用户不受协议中的任何限制,可随机的传输任意比特编码的信息用户可以完全不必知道协议中所规定的结束段的比特编码或者其他的控制字符,因而不受限制的进行传输。 ...
  • xie294777315
  • xie294777315
  • 2014年04月20日 10:45
  • 2501

让FLASH背景透明-可运用于在网页内的FLASH内嵌入另一个网页

在网页中插入FLASH的时候,添加一个属性   ,这样所插入的FLASH照常播放,元件没有变化,但的背景就会变成透明,并且不可操作,就好象被挖空了一样.利用这个方法,可以制作一个中间空白的FLASH...
  • banmuhuangci
  • banmuhuangci
  • 2006年11月01日 17:21
  • 1928

iframe局部刷新的两种实现方法

一、iframe实现局部刷新方法一 1 2 3 4 5 6 7 8 9 10 11 12 13...
  • u012865381
  • u012865381
  • 2016年11月23日 16:09
  • 1345
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何实现Iframe透明
举报原因:
原因补充:

(最多只允许输入30个字)