需求：在一个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. Linux应用程序打包

      原文地址:http://blog.solrex.cn/articles/packaging-1-src.html1. 应用程序打包技术之一(源代码篇) 相信很多朋友都曾经为方便做某件事写过自己的小 ...

  2. Filtering Specific Columns with cut

    Filtering Specific Columns with cut   When working with text files, it can be useful to filter out s ...

  3. 检查主机是否存活的shell脚本

    #!/bin/bash PREFIX= num= " ]; do echo -en "Pinging ${PREFIX}.${num}..." >& &qu ...

  4. H1标签使用的七大注意事项

    H1标签使用的七大注意事项: 1 每个页面都应该有H1标签,H1标签是每个网页不可缺少的要素. 2 使用H1标签的内容应该简洁明了; 3 H1标签要尽量出现在源文件代码的开头的部分,这样可以让访问者和 ...

  5. wildfly部署solr.war

    1.添加solr/home配置,有两种途径: 一个是修改solr.war包的web.xml,路径如下:solr-4.7.2.rar\WEB-INF\web.xml,添加如下内容:

  6. 持续集成环境（Gitlab+jenkins+shell）

    一.搭建gitlab ps:不是这方面的专家,主要还是一键式安装为主. 1.进入官网:https://about.gitlab.com/gitlab-com/ 2.选择自己的操作系统:我这边选择的ub ...

  7. C#操作MYSQL遇到0000-00-00日期报错的原因

    今天在做一个C#连接MYSQL数据库,并读取数据库的内容,遇到了0000-00-00日期转换报错:unable to convert MySQL date/time value to System.D ...

  8. java数据库连接类，已经把数据库操作的方法都封装好了

    在这里分享一个已经封装好了的java数据库连接类,只要创建对象就可以实现数据库的增删改查操作,用过都说好.其实这个不是我自己写的,是一个理解和学习能力超高的朋友写的,他也很乐于分享交流,本人也深受他的 ...

  9. 转载，crtmpserver文件夹结构分析

    1. 顶层(crtmpserver/) 下的文件夹结构 3rdparty/             : 对lua, xml进行解析的源代码文件夹 sources/              : 项目的 ...

  10. 《javascript权威指南》读书笔记 -part2

    我真的很佩服副院长~他是一个很有耐心 极其细致的人 工作态度严谨  代码简洁风格统一~再乱遭遭的代码只要经过他的手就会变的很漂亮 羡煞我也~ 不说废话了  还是乖乖看书吧~maybe可能也许的某一天 ...