需求：在一个div里面嵌套一个iframe（src="ui.html"），div有背景图片，要让iframe里的内容透明地显示在div层上。

刚开始直接把iframe放在div中，结果iframe的背景（默认为白色）挡住了div层的背景，后来在ui.html的最外层div的style上加了background:transparent;属性，FF下显示透明，但在IE下iframe的背景为透明的（改变桌面的窗口颜色 ，效果会更清晰），依然挡住了div层的背景。后来又在iframe标签上加了一个 allowtransparency="true"属性，OK这下就满足需求啦。完整HTML如下：

div:

<div style="width:900px;height:30px;background:url("/img/l.gif") repeat-x;text-align:left">

    <iframe width="300px" height="30px" style="float:left;" frameborder="0" scrolling="no" align="top" src="/ui.html"></iframe>

</div>

ui.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

  <head>

  </head>

  <body style="background:transparent;">

    <div id="uui">

        欢迎大家光临！！！

    </div>

  </body>

</html>

让iframe调用页面的背景透明的更多相关文章

  1. iframe调用页面中的局部部分

    iframe 调用网页,div遮挡展现局部. <div style=" width:iframe宽度; height:iframe高度; overflow:hidden "& ...

  2. IOS修改webView背景透明以及IOS调用前台js的方法

    工作上遇到IOS的webView中的H5页面需要透明以显示webView的背景颜色.用H5自身的透明度的css样式或者js控制背景颜色及透明度都打不到想要的效果,最后还是通过ios设置webView中 ...

  3. 关于iframe调用父页面元素操作

    在iframe子页面获取父页面元素 代码如下: //在iframe子页面获取父页面元素 $.('#objld', parent.document); //在父页面获取iframe子页面的元素 $(&q ...

  4. JQuery调用iframe父页面元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', ...

  5. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

  6. iframe子页面调用父页面javascript函数的方法

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...

  7. Javscript调用iframe框架页面中函数的方法

    Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].h ...

  8. 如何在ie6/ie7/ie8中实现iframe背景透明

    最近做了一个项目,涉及到ie8iframe背景透明的问题,做了老半天,才把它搞定的,现在把我的经历贴出来和大家分享: 众所周知的根据W3C CSS 2.1 规范规定,''''background-co ...

  9. 如何通过iframe调用其他页面的内容

    我们在建站的时候经常会在页面出现同样的内容,比如公司简介之类的,这些东西很长,会减低网页的原创程度,相似度太高,对SE不是很友好.这时我们可以考虑把这部分内容写成一个单独的简单页面,然后通过ifram ...

随机推荐

  1. [转] PostgreSQL学习手册(函数和操作符)

    一.逻辑操作符: 常用的逻辑操作符有:AND.OR和NOT.其语义与其它编程语言中的逻辑操作符完全相同. 二.比较操作符: 下面是PostgreSQL中提供的比较操作符列表: 操作符 描述 < ...

  2. HTML基础总结<段落>

    HTML 段落 段落是通过 <p> 标签定义的. 实例 <p>This is a paragraph </p><p>This is another pa ...

  3. Linux升级C基本运行库CLIBC

    在你准备升级GLIBC库之前,你要好好思考一下, 你真的要升级GLIBC么? 你知道你自己在做什么么? glibc是gnu发布的libc库,即c运行库.glibc是linux系统中最底层的api,几乎 ...

  4. 查看oracle数据库下面的所有的表,执行某个sql脚本：

    查看oracle数据库下面的所有的表: select * from user_tables;//user为用户名 执行某个sql脚本: SQL>@e 文件名.sql

  5. xAML中一些控件的用法学习

    首先,介绍一些比较简单的设计,这些可以直接通过拖拽实现.如下例子: <Window x:Class="wpf1.MainWindow" xmlns="http:// ...

  6. github 使用方法总结 还有一部分不太懂

    1  github在新的目录下添加新的文件 git init //在相应的目录下添加 git add //添加目录 git commit -m "first commit" git ...

  7. hadoop+spark+mongodb+mysql+c#

    一.前言 从20世纪90年代数字化医院概念提出到至今的20多年时间,数字化医院(Digital Hospital)在国内各大医院飞速的普及推广发展,并取得骄人成绩.不但有数字化医院管理信息系统(HIS ...

  8. 信息安全实验四：information-security

    title: authentication date: 2016-01-13 14:33:22 categories: information-security tags: authenticatio ...

  9. app 测试点

    以下所有测试最后必须在真机上完整的执行1.安装.卸载测试 在真机上的以及通过91等第三方的安装与卸载 安装在手机上还是sd卡上 2.启动app测试3.升级测试 数字签名.升级覆盖安装.下载后手动覆盖安 ...

  10. i++ 与 ++i 的从字节码层面看二者的区别

    /** * javap命令可以对class反汇编得到其字节码文件(此命令并不是jdk8开始的,只不过jdk8中对工具进行加强,增加了一些参数,可通过 javap -help了解) * * 注意: * ...