如何使页面里的iframe的背景透明,只显示文字

时间:2022-11-03 15:18:33
主页面main.htm里包含一个iframe,嵌套了一个子页面sub.htm,在此子页面里,仅仅用来显示一行文字。但是主页面使用了一张图片,使得当iframe显示的时候,出现了一个矩形区域,很不好看。

有没有方法,使得iframe的背景透明,只显示文字呢?

15 个解决方案

#1


<iframe src="sub.htm" width="200" height="300" scrolling="auto" frameborder="0"></iframe>

#2


还 有注意一点scrolling="auto"为自动添加滚动条,如果不想要就把值设成"no";
再把sub.htm的背景设置成和main.htm的一样.

#3


谢谢楼上的。注意我的要求:
1,main.htm用了图片,充满整个页面。无法改变其背景。就算能改变,也不符合我的要求。
2,不想使iframe的背景出现,而只出现文字。

#4


iframe里面加载的页面不是透明的,所以会出现一个色块,要想办法改变iframe里面的页面的背景,使前后尽可能的融合

#5


iframe 变成透明
<iframe src=t.htm allowTransparency="true"></iframe>
t.htm <BODY STYLE="background-color:transparent">

#6


谢谢 meizz(梅花雪) 老大。
我找到了MSDN上的一个使iframe透明的例子,和你一样。可是我的却全部透明了。连子页面里的内容都没有,是什么原因啊。

#7


w8u:
子页面的内容都没有
是不是因为你把子页面里的文字颜色设成和上层页面的背景色一样了
比如都是白色

#8


turtlevan(你是猪啊,亲我还愣着干嘛):
没有,因为我的上层页面是DVD播放器(使用MSWebDVD),在停止的时候,子页面背景色和上层不可能一样。

#9


可以实现透明

main.htm

<body BGCOLOR="red">
<IFRAME NAME="Frame1" SRC="iframe.htm" ALLOWTRANSPARENCY="true"> 
</IFRAME> 

iframe.htm

<HTML> 
<BODY  STYLE="background-color:transparent"> 
<P>Transparent. 
</BODY> 
</HTML>

#10


求各位帮忙看看。源文件如下:
main.html
===================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<script>
function KeyDown()
{
iframe1.text.innerHTML="haha"+event.keyCode;;
document.all.iframe1.style.visibility="visible";
}
</script>
<body ms_positioning="GridLayout" onkeydown="KeyDown();">

<iframe id="iframe1" src="sub.htm"  allowTransparency="true" scrolling="no" style="visibility:hidden; position: absolute; left: 5%; top: 5%; width:60%; height:10%;"
frameborder="0"></iframe>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" 

width="729" height="90" ID="Shockwaveflash1" VIEWASTEXT style="position: absolute;top:20%;left:20%">
  <param name=movie value="http://www.ccw.com.cn/_images/img2/erp_1106.swf">
  <param name=quality value=high>
</object>

</body>
</html>

#11


sub.htm
===================
<HTML>
<HEAD>
<TITLE>Transparent Document</TITLE>
<STYLE TYPE="text/css">
.osd         { color: #00FF00; font-family: Arial; font-size: 36pt; FILTER: glow(color:#000000,strength=1);  }
</STYLE>

</HEAD>
<BODY scroll="no"   STYLE="background-color:transparent;" LEFTMARGIN="0" MARGINWIDTH="0" TOPMARGIN="0" MARGINHEIGHT="0">
<div id="text" style="LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%"
class="osd"> transparent</div>
</BODY>
</HTML>

#12


将以上文件保存后,浏览,会发现iframe确实透明了。但是问题是:
如果把flash控件位置调整到和iframe重合,也就是修改成如下:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" 

width="729" height="90" ID="Shockwaveflash1" VIEWASTEXT style="position: absolute;top:0%;left:0%">

将其中的top,left的值修改后,则flash将iframe遮住了。

经过摸索,我们发现:
如果iframe不使用allowTransparency属性,则iframe可以在flash上面显示。一旦设置了allowTransparency属性,无论是true,false,一律在flash后面了。

#13


是的, iframe 设置透明之后就会被 select flash 等元素覆盖了, 这好象是个BUG
不过你也可以把 flash 设置成透明的, 不过不能操作 iframe 里的东西了.
<param name="wmode" value="transparent">    Flash变成透明

#14



怎么给网页中的FLASH动画加超连接,加事件...    
http://www.csdn.net/Develop/read_article.asp?id=20003

这样,就可以把FLASH设置为底层了.

<div  style="z-index:-1">  <!--1.设置FLASH为底层-->
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="200" height="115">
    <param name="movie" value="media.swf">
  <param name="quality" value="high">
  <embed src="media.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="115"></embed> 
  <param name="wmode" value="transparent">  <!--2.必须把FLASH设置为透明-->
</object> </div>  
<!--可以把iframe放在这个层里面-->
<div id="huiLayer"  style="cursor: hand; position:absolute; left:10px; top:10px; width:200px; height:115px; z-index:1; visibility:  visible;"><a href="http://www.cnlk.com">
<img src="kong.gif" width="200" height="115" border="0"></a></div>

#15


感谢 wanghr100(灰豆宝宝.net):
经试验,确实能使flash在iframe下面,并且iframe透明。非常感谢。

不过,唉,我使用的使MSWebDVD,结果还是不行。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<script>
function KeyDown()
{
iframe1.text.innerHTML="haha"+event.keyCode;;
document.all.iframe1.style.visibility="visible";
}
</script>
<body ms_positioning="GridLayout" onkeydown="KeyDown();" onload="dvd.Play();">

<div style="z-index:-1">

<!-- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" 
width="729" height="90" ID="Shockwaveflash1" VIEWASTEXT style="position: absolute;top:0%;left:0%">
<param name=movie value="http://www.ccw.com.cn/_images/img2/erp_1106.swf">
<param name=quality value=high>
-->
<OBJECT ID="dvd" WIDTH="100%" HEIGHT="100%" style="position: absolute;top:20%;left:0%" CLASSID="CLSID:38EE5CEE-4B62-11D3-854F-00A0C9C898E7"
VIEWASTEXT>
<PARAM NAME="_cx" VALUE="5080">
<PARAM NAME="_cy" VALUE="5080">
<PARAM NAME="DisableAutoMouseProcessing" VALUE="0">
<PARAM NAME="BackColor" VALUE="1048592">
<PARAM NAME="EnableResetOnStop" VALUE="0">
<PARAM NAME="ColorKey" VALUE="1048592">
<PARAM NAME="WindowlessActivation" VALUE="0">
<param name="wmode" value="transparent">  <!--2.必须把FLASH设置为透明-->
</object>
</div>

<div style="z-index:0;position: absolute; left: 0%; top: 0%; width:100%; height:100%;">
<img src="kong.gif" style="position: absolute; left: 0%; top: 0%; width:100%; height:100%;" border="10">
</div>

<div style="z-index:10" onkeydown="KeyDown();">
<iframe id="iframe1" src="sub.htm"  allowTransparency="true" scrolling="no" style="visibility:hidden; position: absolute; left: 5%; top: 5%; width:60%; height:10%;"
frameborder="0"></iframe>
</div>

</body>
</html>

#1


<iframe src="sub.htm" width="200" height="300" scrolling="auto" frameborder="0"></iframe>

#2


还 有注意一点scrolling="auto"为自动添加滚动条,如果不想要就把值设成"no";
再把sub.htm的背景设置成和main.htm的一样.

#3


谢谢楼上的。注意我的要求:
1,main.htm用了图片,充满整个页面。无法改变其背景。就算能改变,也不符合我的要求。
2,不想使iframe的背景出现,而只出现文字。

#4


iframe里面加载的页面不是透明的,所以会出现一个色块,要想办法改变iframe里面的页面的背景,使前后尽可能的融合

#5


iframe 变成透明
<iframe src=t.htm allowTransparency="true"></iframe>
t.htm <BODY STYLE="background-color:transparent">

#6


谢谢 meizz(梅花雪) 老大。
我找到了MSDN上的一个使iframe透明的例子,和你一样。可是我的却全部透明了。连子页面里的内容都没有,是什么原因啊。

#7


w8u:
子页面的内容都没有
是不是因为你把子页面里的文字颜色设成和上层页面的背景色一样了
比如都是白色

#8


turtlevan(你是猪啊,亲我还愣着干嘛):
没有,因为我的上层页面是DVD播放器(使用MSWebDVD),在停止的时候,子页面背景色和上层不可能一样。

#9


可以实现透明

main.htm

<body BGCOLOR="red">
<IFRAME NAME="Frame1" SRC="iframe.htm" ALLOWTRANSPARENCY="true"> 
</IFRAME> 

iframe.htm

<HTML> 
<BODY  STYLE="background-color:transparent"> 
<P>Transparent. 
</BODY> 
</HTML>

#10


求各位帮忙看看。源文件如下:
main.html
===================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<script>
function KeyDown()
{
iframe1.text.innerHTML="haha"+event.keyCode;;
document.all.iframe1.style.visibility="visible";
}
</script>
<body ms_positioning="GridLayout" onkeydown="KeyDown();">

<iframe id="iframe1" src="sub.htm"  allowTransparency="true" scrolling="no" style="visibility:hidden; position: absolute; left: 5%; top: 5%; width:60%; height:10%;"
frameborder="0"></iframe>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" 

width="729" height="90" ID="Shockwaveflash1" VIEWASTEXT style="position: absolute;top:20%;left:20%">
  <param name=movie value="http://www.ccw.com.cn/_images/img2/erp_1106.swf">
  <param name=quality value=high>
</object>

</body>
</html>

#11


sub.htm
===================
<HTML>
<HEAD>
<TITLE>Transparent Document</TITLE>
<STYLE TYPE="text/css">
.osd         { color: #00FF00; font-family: Arial; font-size: 36pt; FILTER: glow(color:#000000,strength=1);  }
</STYLE>

</HEAD>
<BODY scroll="no"   STYLE="background-color:transparent;" LEFTMARGIN="0" MARGINWIDTH="0" TOPMARGIN="0" MARGINHEIGHT="0">
<div id="text" style="LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%"
class="osd"> transparent</div>
</BODY>
</HTML>

#12


将以上文件保存后,浏览,会发现iframe确实透明了。但是问题是:
如果把flash控件位置调整到和iframe重合,也就是修改成如下:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" 

width="729" height="90" ID="Shockwaveflash1" VIEWASTEXT style="position: absolute;top:0%;left:0%">

将其中的top,left的值修改后,则flash将iframe遮住了。

经过摸索,我们发现:
如果iframe不使用allowTransparency属性,则iframe可以在flash上面显示。一旦设置了allowTransparency属性,无论是true,false,一律在flash后面了。

#13


是的, iframe 设置透明之后就会被 select flash 等元素覆盖了, 这好象是个BUG
不过你也可以把 flash 设置成透明的, 不过不能操作 iframe 里的东西了.
<param name="wmode" value="transparent">    Flash变成透明

#14



怎么给网页中的FLASH动画加超连接,加事件...    
http://www.csdn.net/Develop/read_article.asp?id=20003

这样,就可以把FLASH设置为底层了.

<div  style="z-index:-1">  <!--1.设置FLASH为底层-->
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="200" height="115">
    <param name="movie" value="media.swf">
  <param name="quality" value="high">
  <embed src="media.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="115"></embed> 
  <param name="wmode" value="transparent">  <!--2.必须把FLASH设置为透明-->
</object> </div>  
<!--可以把iframe放在这个层里面-->
<div id="huiLayer"  style="cursor: hand; position:absolute; left:10px; top:10px; width:200px; height:115px; z-index:1; visibility:  visible;"><a href="http://www.cnlk.com">
<img src="kong.gif" width="200" height="115" border="0"></a></div>

#15


感谢 wanghr100(灰豆宝宝.net):
经试验,确实能使flash在iframe下面,并且iframe透明。非常感谢。

不过,唉,我使用的使MSWebDVD,结果还是不行。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<script>
function KeyDown()
{
iframe1.text.innerHTML="haha"+event.keyCode;;
document.all.iframe1.style.visibility="visible";
}
</script>
<body ms_positioning="GridLayout" onkeydown="KeyDown();" onload="dvd.Play();">

<div style="z-index:-1">

<!-- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" 
width="729" height="90" ID="Shockwaveflash1" VIEWASTEXT style="position: absolute;top:0%;left:0%">
<param name=movie value="http://www.ccw.com.cn/_images/img2/erp_1106.swf">
<param name=quality value=high>
-->
<OBJECT ID="dvd" WIDTH="100%" HEIGHT="100%" style="position: absolute;top:20%;left:0%" CLASSID="CLSID:38EE5CEE-4B62-11D3-854F-00A0C9C898E7"
VIEWASTEXT>
<PARAM NAME="_cx" VALUE="5080">
<PARAM NAME="_cy" VALUE="5080">
<PARAM NAME="DisableAutoMouseProcessing" VALUE="0">
<PARAM NAME="BackColor" VALUE="1048592">
<PARAM NAME="EnableResetOnStop" VALUE="0">
<PARAM NAME="ColorKey" VALUE="1048592">
<PARAM NAME="WindowlessActivation" VALUE="0">
<param name="wmode" value="transparent">  <!--2.必须把FLASH设置为透明-->
</object>
</div>

<div style="z-index:0;position: absolute; left: 0%; top: 0%; width:100%; height:100%;">
<img src="kong.gif" style="position: absolute; left: 0%; top: 0%; width:100%; height:100%;" border="10">
</div>

<div style="z-index:10" onkeydown="KeyDown();">
<iframe id="iframe1" src="sub.htm"  allowTransparency="true" scrolling="no" style="visibility:hidden; position: absolute; left: 5%; top: 5%; width:60%; height:10%;"
frameborder="0"></iframe>
</div>

</body>
</html>