iframe背景透明的设置方法举例

发布时间:2019-11-29编辑:脚本学堂
本文介绍下,html标签中的iframe设置背景色透明的方法,有需要的朋友参考下吧。

框架页iframe文件设置:
 

复制代码 代码示例:
<body style="background-color:transparent" > 或 <body bgColor="transparent">

方法一:
 

复制代码 代码示例:
<iframe src="about.htm" width="100%" height="100%" align="center" scrolling="auto" frameborder="0" style="filter:chroma(color=#ffffff)" >
</iframe>

缺点:iFrame里的白色的都变透明了。

方法二:(推荐)
 

复制代码 代码示例:
<iframe src="about.htm" width="100%" height="100%" align="center" scrolling="auto" frameborder="0" allowTransparency="true" >
</iframe>

另外的写法,大家参考下:
 

复制代码 代码示例:
<iframe src="about.htm" allowTransparency="true" style="background-color: green"> </iframe >
<iframe src="about.htm"> </iframe >
<iframe src="about.htm" style="background-color: green"> </iframe >

附,网友提供的方法,如何在iframe中设置背景颜色为透明!
方法一:
引用内容可以设置嵌入页面的背景色,还可以设置iframe的背景透明,看到的颜色是框架页的背景色。
1,框架页
 

<body bgColor="#eeeeee">
<iframe allowTransparency="true" src="transparent.htm">
</iframe>

2,transparent.htm页
 

<body bgColor="transparent">

方法二:
引用内容在transparentBody.htm文件的标签中,加入:
 

style="background-color=transparent"

iframe背景透明效果的实现方法,四个示例,供大家参考:
 

复制代码 代码示例:
<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"></IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"></IFRAME>