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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>父页面</title>
</head>
<body bgcolor="#FF0000">
<iframe src="index.htm"  allowTransparency="true"></iframe>
</body>
</html>

子页面


代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>子页面</title>
<style type="text/css">
body
{
    background-color: transparent;
}
</style>
</head>
<body>
</body>
</html>

赞 (0)

相关推荐

  • iframe子父页面调用js函数示例

    1.iframe子页面调用父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: 复制代码 代码如下: window.parent.a(); 子页面取父页面中的标签中的值,比如该标签的id为"test",则: 复制代码 代码如下: window.parent.document.getElementById("test").value; jQuery方法为: $(window.parent.document).c

  • iframe子页面获取父页面元素的方法

    在iframe子页面获取父页面元素 代码如下: 复制代码 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: 复制代码 代码如下: $("#objid", document.iframes('iframe').document) 或 复制代码 代码如下: $(document.getElementById('iframeId').contentWindow.document.body).html() $(docum

  • PHP关于IE下的iframe跨域导致session丢失问题解决方法

    今天搞的一个登录页面,被别的网站用iframe嵌进去后,死活无法登录(只在IE中存在这种情况). 很明显,session无法被保存.但是直接在地址栏打开那个登录页面,一切都正常啊.真是奇怪啊. 在网上搜索了一下.发现这个问题还真有不少人提及到.最后的解决方法是在那个登录页面里加上以下代码: 复制代码 代码如下: <span style="font-family:Microsoft YaHei; font-size:14px">header('P3P: CP="AL

  • iframe背景透明的设置方法

    IE5.5开始支持浮动框架的内容透明.如果想要为浮动框架定义透明内容,则必须满足下列条件. 1.与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true. 2.在 iframe 内容源文档,background-color 或 body 元素的 bgColor 标签属性必须设置为 transparent 复制代码 代码如下: <iframe src="./ads_top_tian.html" allowtransparency="

  • WinFrom中label背景透明的实现方法

    本文实例讲述了WinFrom中label背景透明的实现方法,在应用程序开发中有着不错的实用价值.分享给大家供大家参考.具体实现方法如下: 使用: lblPstart.BackColor=Color.Transparent; 就可以让lable控件的背景色透明,可以看到摆放lable容器的背景色,但这个背景色不一定是窗体的背景色. 比如: From1.Controls.Add(lable1); lable1.BackColor=Color.Transparent; 这样,lable1就是透明的  

  • iframe 背景透明 实现方法

    allowtransparency="true" style="background-color=transparent"

  • iframe transparent透明背景方法

    在transparentBody.htm文件的<body>标签中,我已经加入了style="background-color=transparent" 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解 复制代码 代码如下: <IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"

  • Android编程实现设置按钮背景透明与半透明及图片背景透明的方法

    本文实例讲述了Android编程实现设置按钮背景透明与半透明及图片背景透明的方法.分享给大家供大家参考,具体如下: Button或者ImageButton的背景设为透明或者半透明: 半透明 复制代码 代码如下: <Button android:background="#e0000000" ... /> 透明 复制代码 代码如下: <Button android:background="#00000000" ... /> 颜色和不透明度 (al

  • ie7+背景透明文字不透明超级简单的实现方法

    ie7+背景透明文字不透明超级简单的实现方法

    如果你现在还在为背景透明文字不透明而发愁的话,建议你来看看.当然IE6我已经放弃了,所以不要说不用PNG8的图片这样在IE6下没有效果,当然你也可以用滤镜.本人不建议使用滤镜.因为这样可能会出现其它问题!(如无法点击等等问题)做前端最怕的就是BUG,特别是IE6.滚蛋IE6!本文的核心就是利用PNG32透明图片来做背景然后平铺背景就行了.这样就不会存在背景透明文字也透明了.这样做起来超级简单你们说呢!图片只需要调整透明度即可.在PSD中把图片设置为20%的透明度保存为png就行了.(切忌:不要设

  • 实现png图片和png背景透明（支持多浏览器）的方法

    虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好.使用到的就是:IE5.5+的AlphaImageLoader滤镜. 1.png背景透明 解决办法: 复制代码 代码如下: #div1 { height: 600px; width: 260px; padding: 20px; background-repeat: repeat; } html>body #div1 { background-repeat: repeat;background-image: url(

  • Android编程之selector下设置背景属性值的方法

    本文实例讲述了Android编程之selector下设置背景属性值的方法.分享给大家供大家参考,具体如下: 在res/drawable文件夹新增一个文件,此文件设置了图片的触发状态,你可以设置 state_pressed,state_checked,state_pressed,state_selected,state_focused,state_enabled 等几个状态: android:state_pressed Boolean. "true" if this item shoul

  • C#设置Word文档背景的三种方法（纯色/渐变/图片背景）

    Word是我们日常生活.学习和工作中必不可少的文档处理工具.精致美观的文档能给人带来阅读时视觉上的美感.在本篇文章中,将介绍如何使用组件Free Spire.Doc for .NET(社区版)给Word设置文档背景.下面的示例中,给Word添加背景分为三种情况来讲述,即添加纯色背景,渐变色背景和图片背景. 工具使用:下载安装控件Free Spire.Doc后,在项目程序中添加Spire.Doc.dll即可(该dll可在安装文件下Bin文件夹中获取) 一.添加纯色背景 using Spire.Do

  • Vue如何设置el-table背景透明样式

    目录 [前言] [内容] 1.在el-table外加div并自定义class 2.重写css样式 [前言] 一般我们在使用ElementUI组件库的时候,在使用el-table时,背景通常是白色的,但有时候不能满足我们的实际需求,我想让el-table背景变为透明色,下面就来说一下如何实现. [内容] 说明:因为我们通常都是使用ElementUI库的组件,这个组件库是有自己的一套样式的,所以要想实现自己想要的效果,难免要重写样式来实现. 重写样式需要加(>>> 或者 /deep/),不加

随机推荐