`
hope598
  • 浏览: 67053 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

让iframe调用页面的背景透明

    博客分类：
  • css
UIIEHTMLXHTML 
阅读更多

需求：在一个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>

 

   欢迎大家拍砖

 

1
顶
0
踩
分享到：
| java判断变量是否是数字
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    iframe弹出窗

    可以使用CSS来设置`div`的样式，使其看起来像一个弹出窗口，包括边框、背景、透明度等效果。例如： ```html ; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; border:1px ...

    colorbox弹出窗口，置顶弹出隐藏层，并且背景置灰 简单示例，简单调用方式，更多调用方式请网上查询资料，仅提供运行所需依赖c

    在网页设计和开发中，有时候我们需要创建一种效果，即当用户点击某个元素时，一个弹出窗口会在页面上出现，同时背景变暗，以便聚焦用户的注意力。这就是所谓的“模态”或“弹出框”效果。Colorbox是一个流行的...

    lightbox在iframe内弹在父窗口上

    Lightbox是一种常见的网页图片预览技术，它允许用户在点击图片链接后，图片会在当前页面上以半透明背景和居中的方式弹出显示，提供更好的观看体验。在提及的"Lightbox在iframe内弹在父窗口上"的话题中，我们讨论的是...

    通用的iframe弹层插件.zip

    6. **遮罩层**：在弹出层显示时，可能有一个半透明的遮罩层覆盖整个页面，以突出弹出内容并阻止用户与背景交互。 7. **动画效果**：添加平滑的打开和关闭动画，提升用户体验。 在实际应用中，开发者可以通过...

    unigui_网页iframe交互_完善_02

    7. **样式调整**：在Unigui中，可以通过CSS对IFrame进行样式定制，如边框、背景色、透明度等，使其更好地融入整体界面设计。 8. **错误处理**：在开发过程中，应充分考虑可能出现的错误情况，如URL无效、IFrame加载...

    greybox在Iframe的父窗口弹出

    在Iframe的场景下，如果我们在Iframe内的页面中触发greybox弹窗，目标是让这个弹窗在父窗口中显示，这就涉及到跨窗口通信。在HTML5中，`window.parent`对象提供了与父窗口进行通信的途径。我们可以在Iframe内的脚本...

    父页面显示遮罩层弹出半透明状态的dialog

    遮罩层通常是一个全屏的、半透明的背景层，用于覆盖整个父页面，使得用户只能看到和交互弹出的dialog。在这个例子中，我们使用CSS来创建遮罩层和dialog。 在CSS部分，我们定义了两个类，`.bg` 和 `.mydiv`。`.bg` ...

    DD_belatedPNG.js解决IE6浏览器下的PNG透明图片显示问题

    这主要源于IE6不支持PNG8以上的Alpha透明度，导致透明PNG图片在该浏览器下显示为黑色背景或者完全不透明。为了解决这个问题，开发者们创造了一种名为“DD_belatedPNG”的JavaScript库，它通过JavaScript模拟了PNG...

    js 弹出窗口 弹出div window 支持遮罩、拖动、嵌入页面、换肤等实用功能

    1. **遮罩效果**：遮罩层是在弹出窗口后面添加一个半透明的背景层，以突出显示弹出窗口并防止用户与页面其他部分互动。实现这一效果通常涉及到CSS的透明度和定位属性，以及JavaScript来动态调整遮罩层的大小和显示。...

    thickbox 调用的文件

    当用户点击一个链接或图像，Thickbox会通过JavaScript动态地创建一个覆盖整个页面的黑色半透明背景层，然后在中央加载选定的内容。内容可以是图片、HTML页面、SWF文件、YouTube视频等，这些都是通过修改DOM元素并在...

    Dreamwear设计常用代码 12-16.docx

    5. **让IFRAME框架内的文档背景透明** `IFRAME`元素常用于在页面中嵌入其他网页或内容。通过设置`style="background: transparent"`和`allowtransparency`属性，可以使IFRAME内的文档背景变为透明，允许其下方的...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -增加示例(iframe/parent_postback_run3.aspx)，如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性，增加CollapseMode, ...

    lightbox jQuery

    在网页上，当用户点击一个缩略图时，Lightbox会以半透明背景层覆盖整个页面，将所选图片放大并在中心显示，同时提供导航按钮以便浏览相关图片集。这种效果增强了用户的互动性和视觉享受，使得在线查看图片变得更加...

    ExtAspNet_v2.3.2_dll

    -增加示例(iframe/parent_postback_run3.aspx)，如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性，增加CollapseMode, ...

    UIWebView的使用代码

    有用的控件,经常使用设置背景透明 设置webview的backgroundColor属性为[UIColor clearColor]; ? 1 webView.backgroundColor = [UIColor clearColor]; 为webview中的HTML页面的body标签添加CSS背景样式设置 ? ...

    简单三步实现报表页面集成天气

    此外，如果希望iframe背景透明，可以在iframe标签中加入`allowtransparency="true"`属性，这能让天气信息更自然地融入到报表页面中。 最后一步是将iframe标签放置到报表设计器中，如FineReport报表工具。这部分相对...

    IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点

    这个问题的背景是，开发人员创建了一个自定义的弹出层，通过动态添加遮罩层和一个包含IFrame的DIV来实现。IFrame加载的是一个外部的HTML文件，该文件中包含了一些表单元素，如文本输入框。在IE6环境下，用户尝试点击...

    artDialog_Demo

    1、 修改一小处兼容框架样式，防止调用页面body设置了文本对齐导致对话框标题文 本也居中 v2.0.3 1、 增加id参数，可以方便外部脚本控制整个对话框，同时可防止对话框重复弹出 2、 增加yesClose参数，用于阻止...

    学习更轻松！！！一些常用的JS代码

    这里展示了如何创建一个背景透明的iframe，其中`allowtransparency`属性确保了iframe内的内容可以显示为透明，而`FILTER:chroma(COLOR=#ffffff)`则是在IE浏览器下实现背景透明效果的一种方式。 ### 网页滚动条样式...

    bgiframe_2.1.1.zip

    而bgiframe_2.1.1.zip则是jQuery的一个重要插件，它专为解决在特定浏览器环境中对话框（dialog）背景透明度问题而设计。这个小巧的插件极大地提升了用户体验，使得对话框在各种浏览器环境下都能保持一致的显示效果。...

Magicbox
Global site tag (gtag.js) - Google Analytics