当前位置 : IT培训网 > Web前端 > Web培训 > 怎么样使iframe背景颜色变为透明的

怎么样使iframe背景颜色变为透明的

时间：2017-07-19 16:30:44  来源：web前端培训网  作者：IT培训网  已有：名学员访问该课程
标签(Tag):   iframe背景颜色(1)iframe透明(4)iframe(4)
iframe的背景颜色在IE下为window的当前窗口颜色（默认白色，可以在显示外观处对其进行设置），这导致在大幅背景上插入iframe时，需要给它“透底”，可是IE不支持对iframe设置背景色，那怎么办呢？

iframe背景透明设置方法你知道吗，虽然当前对iframe的使用较少了，可在某些地方还是会用到的，今天我们就来看看iframe的其中一个功能，那就是如何使iframe背景透明，想要学习赶紧随IT培训网小编一起来看看吧！

iframe的背景颜色在IE下为window的当前窗口颜色（默认白色，可以在显示外观处对其进行设置），这导致在大幅背景上插入iframe时，需要给它“透底”，可是IE不支持对iframe设置背景色，那怎么办呢？

解决办法是在iframe中设置：

allowtransparency=”true”

如下：

<iframe width="100%" height="200" src="demo.html" allowTransparency="true" frameBorder="0" scrolling="no"></iframe>

AD：【优秀主题】tob主题正式发布，够炫酷！ 完美的自适应布局，完善的图片站配置。

方法汇总：

框架页文件设置：

<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 > 

经测试，<body style="background-color:transparent" >  +  allowTransparency="true" 有效

[html] view plain copy

<iframe id="iframeRight" src="/111.html" scrolling="no" width="100%" height="100%" frameborder="0" allowTransparency="true"></iframe> 

111.html 如下：

[html] view plain copy

<style> 

body{ 

background-color:Transparent; 

} 

</style> 

<div style="width:144px;height:557px;" id="divFloat1"> 

  <img src="/image/fd_4.png" usemap="#Map20" border="0" /> 

</div>    

以上就是IT培训网小编为大家精心准备的内容，在IT培训网的教程里，有更多关于网页设计方面的知识点，如果想要学习的话，赶紧关注小站吧！

顶一下
(0)
0%
踩一下
(0)
0%

IT培训0元试听 每期开班座位有限.0元试听抢座开始！ IT培训0元试听

  • 姓名 : *
  • 电话 : *
  • QQ : *
  • 留言 :
  • 验证码 : 看不清？点击更换请输入正确的验证码

在线咨询在线咨询

温馨提示 : 请保持手机畅通，咨询老师为您
提供专属一对一报名服务。

------分隔线----------------------------
分享到：QQ空间新浪微博腾讯微博人人网微信
------分隔线----------------------------

大话IT

推荐内容

图文推荐

相关热点