需求：在一个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. Qt 内存泄漏测试

    在说Qt的内存测试之前,首先需要说明和肯定的一点是:Qt是绝对没有内存泄漏的,我们必须相信这一点. 接下来,说明一下基于Linux的Qt内存测试工具及其用法和说明: 一.内存测试工具Valgrind ...

  2. Java基础知识强化22：Java中数据类型转换

    数据类型转换: (1). 自动转换 低级变量可以直接转换为高级变量,这叫自动类型转换.比如: byte b: int b:  long b:  float b:   double  b: 上面的语句可 ...

  3. css布局篇

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  4. OLEDB 连接EXCEL的连接字符串IMEX的问题(Oledb)

    今天碰到一个问题需要想EXCEL表中写数据,折腾了好久才发现是IMEX惹得祸,所以记录下提醒自己,也希望大家不要出同样的错. 碰到问题:使用语句 "insert into [Sheet1$] ...

  5. （转）TortoiseSVN使用简介

    TortoiseSVN使用简介 TortoiseSVN使用简介 2009-04-24 来源:dev.idv.tw 1 安装及下载client 端 2 什么是SVN(Subversion)? 3 为甚么 ...

  6. 'swap file "xx" exists' linux

    solution: 1)swap to another tty, kill processes using 'sudo kill -9 pid' 2)'Recover' the 'warn-openn ...

  7. WARNING OGG-01223 TCP/IP error 111 (Connection refused)

    一:问题描述 GGSCI (source_pc) 64> info all Program     Status      Group       Lag at Chkpt  Time Sinc ...

  8. Revenge of Fibonacc

    算法:搜索: In mathematical terms, the sequence Fn of Fibonacci numbers is defined by the recurrence rela ...

  9. switch语句中的选择因子

    switch语句能否用作用在byte上,能否作用在long上,能否作用在String上? switch选择语句的格式为: switch(intergral-selector){ case  integ ...

  10. java8+spring+angularjs 项目应用

    最近有写一个电子订单商务网站,使用JAVA8,SPRING,ANGULARJS对项目使用的技术和大家分享. 第一次写博客,哪有不对需要改正的请联系改正. 因为是项目是我给别人做的无法提供源码见谅,我尽 ...