iframe背景透明的设置方法

iframe背景透明的设置方法

ie5.5开始支持浮动框架的内容透明。如果想要为浮动框架定义透明内容,则必须满足下列条件。

1.与 iframe 元素一起使用的 allowtransparency 标签属性必须设置为 true。

2.在 iframe 内容源文档,background-color 或 body 元素的 bgcolor 标签属性必须设置为 transparent

<iframe src="./ads_top_tian.html"allowtransparency="true"style="background-color=transparent"title="test"frameborder="0"width="470"height="308"scrolling="no"></iframe>

当然前提是iframe页面中没有设置颜色.

在上面我们主要是看到了style中的一句代码style="background-color=transparent" 通过以下四种IFRAME的写法我想大概你对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>

现在我们来看一个实例

本例主要是iframe对象的allowTransparency属性应用,在该属性设置为true并且iframe所载加页的背景颜色设置为transparent(透明)时iframe将透明化。

allowTransparency设置或获取对象是否可为透明。

bgColor 设置或获取对象的背景颜色

父页面

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=gb2312">

<title>父页面</title>

</head>

<bodybgcolor="#FF0000">

<iframesrc="index.htm"allowTransparency="true"></iframe>

</body>

</html>



<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=gb2312">

<title>子页面</title>

<styletype="text/css">

body

{

    background-color: transparent;

}

</style>

</head>

<body>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在页面布局时,为了给用户不一样的视觉效果,需要设置div的背景颜色为半透明状态,你知道怎么设置吗? 接下来,就和大...
    PHP9年架构师阅读 2,444评论 0 5
  • ●暗夜风格:E:/wjm/能耗监测管理系统/能耗监测网页pc版v2暗色版/index_night_layer.ht...
    流都阅读 1,287评论 0 0
  • 第一章 1、使用浏览器去访问的程序,叫网页 2、web代码存放在服务器 代码分为两种:① 运行在浏览器端:前端代...
    fastwe阅读 8,742评论 0 2
  • IFRAME的各种经验总结 在一个页面中如果想嵌套子页面,应该能想到iframe,的确它之前的应用非常广泛,它可以...
    wavesnow阅读 5,472评论 1 6
  • 1、iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 HTML 与 X...
    _双眸阅读 7,178评论 0 1