`

如何实现Iframe透明

 
阅读更多

代码如下:

a.html如下:

<HTML><HEAD><TITLE></TITLE>
< http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY style="BACKGROUND-COLOR: transparent">
<H1>透明文档</H1>
<P>此I无背景颜色</P>
<P>BODY:<br><BODY STYLE="background-color:transparent"></P></BODY></HTML>

b.html如下:

<HTML><HEAD><TITLE></TITLE>
< http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY style="BACKGROUND-COLOR: transparent">
<H1>透明文档</H1>
<P>此I 设为绿色。</P>
<P>BODY: <br><BODY STYLE="background-color:transparent"></P></BODY></HTML>

如果a.html透明的,它将继承I的背景颜色 如果容器I也是透明的,a.html将继承I的父容器的颜色,如果一个对象不透明,它将覆盖其容器的颜色,默认是透明的。

Internet Explorer 5.5 以上版本允许你设置透明属性,通过设置是否可被透明,你可以改变背景的颜色。[在不设置透明属性的情况下,默认背景颜色为白色]

I定义如下:

<I ID="1" src="/a.html" allowTransparency="true" HEIGHT=180 WIDTH=300> </I> <I ID="2" src="/b.html" allowTransparency="true" STYLE="background-color:#459800" HEIGHT=180 WIDTH=300> </I>

按钮定义如下:

<INPUT TYPE="button" ="不透明" ="turnTransparencyOff()"> <INPUT TYPE="button" ="透明" ="turnTransparencyOn()">

<>
//函数turnTransparencyOff():

turnTransparencyOff()
{ all.1.allowTransparency = false; all.2.allowTransparency = false; }

//函数turnTransparencyOn():

turnTransparencyOn()
{ all.1.allowTransparency = true; all.2.allowTransparency = true; }
</>

分享到:
评论

相关推荐

    iframe 框架透明背景

    总的来说,实现“iframe框架透明背景”主要涉及`iframe`标签的使用,以及相关的CSS样式设置,特别是背景颜色和边框的透明化处理。同时,还要注意浏览器兼容性和跨域问题,确保在各种环境下都能正确显示。通过这样的...

    iframe框架透明样式

    ### iframe框架透明样式的实现与应用 在网页设计与开发过程中,经常需要使用到`&lt;iframe&gt;`元素来嵌入其他页面或内容。然而,在实际应用中可能会遇到由于内外层页面背景色不一致导致视觉效果不佳的情况。为了提高用户...

    HTML iframe设置背景透明

    通过以上方法,我们可以实现`HTML iframe`的背景透明效果。不过,需要注意的是,透明`iframe`可能会暴露出其下方的内容,因此在设计时要考虑整体布局和用户体验。在提供的`demo`文件中,可能包含了一个示例代码,...

    使用iframe在网页中嵌入其他网页的方法

    总结来说,`iframe`是一个强大的网页设计元素,它可以方便地将其他网页内容嵌入到当前页面中,通过调整其属性,可以实现定制化的展示效果。然而,在使用`iframe`时,也需要考虑到潜在的技术限制和用户体验因素。对于...

    iframe背景透明的设置方法

    要实现iframe背景的透明效果,需要对iframe的属性进行适当的设置。 首先,重要的是了解并非所有浏览器都支持iframe背景的透明设置。从IE5.5版本开始,浏览器开始支持浮动框架内容的透明化。要使iframe支持透明效果...

    iframe transparent透明背景方法

    然而在使用iframe时,可能会遇到需要让iframe背景透明的需求。...总之,通过上述的iframe透明背景方法,我们可以更灵活地控制iframe在页面中显示效果,无需每次都修改内部页面,大大提高了页面设计的效率和灵活性。

    iframe弹出窗

    实现iframe弹出窗** 实现"iframe弹出窗"的过程通常包括以下步骤: 1. 创建一个`div`元素作为对话框的基础结构。 2. 在`div`中嵌入`iframe`元素,设置`iframe`的`src`属性指向需要加载的页面。 3. 使用CSS控制...

    iframe弹出框遮罩父类页面

    实现iframe弹出框遮罩父类页面的关键在于以下几个步骤: 1. **创建iframe**:在子页面HTML中,我们需要创建一个`iframe`元素,并设置相应的属性,如`src`指向要加载的页面,`width`和`height`定义弹出框的大小,...

    iframe实现图片异步上传.doc

    这个过程对用户来说是透明的,因为是在`iframe`中进行的。 6. **服务器端处理**: 服务器端(例如在`uploadWaiguanImage.do`中)接收到文件后,通常会将图片保存到特定的文件夹,并记录图片的路径到数据库。此外,...

    测试iframe

    `iframe`常用于实现页面的模块化、加载外部应用、广告嵌入、视频播放等场景。在本话题中,我们将深入探讨`iframe`的相关知识点。 1. **`iframe`基本结构** `iframe`标签的基本使用方式如下: ```html &lt;iframe ...

    基于js的iframe 可关闭tab标签组件使用方法

    2. **CSS样式**:添加样式以实现美观的布局和交互效果,例如,未选中的tab按钮可以设置为透明,选中的tab按钮加粗等。 3. **JavaScript代码**:首先引入`jquery.js`库,它提供了一套强大的DOM操作和事件处理函数,...

    点击弹出窗口网页背景变暗且不可点的效果(二):iframe实现

    总结来说,这个话题涵盖了HTML的`iframe`使用、CSS样式控制(包括透明度和遮罩层)、JavaScript交互逻辑以及可能的自定义拖动功能实现。这些技术对于创建现代Web应用中的弹窗和对话框界面是至关重要的。

    在iframe 中页面中设置遮罩遮罩层

    本话题将详细讲解如何在iframe中实现页面的遮罩层功能,结合`right.html`, `main.html`, `left.html`, `top.html`这四个文件,我们可以构建一个具有完整布局的页面,并在其中嵌入iframe来实现遮罩层。 首先,我们...

    div覆盖 iframe

    在这个场景下,`subModal`可能定义了如何创建和控制`div`覆盖`iframe`的动画、透明度以及关闭机制。 总的来说,这个场景涉及到了前端开发中的布局技巧和交互设计,通过巧妙地利用`div`和`iframe`,可以创建出丰富的...

    让iframe透明的参数

    标题和描述中提到的“让iframe透明的参数”就是指如何配置`iframe`以达到这种目的。这里我们将详细介绍如何通过设置`iframe`的属性和样式来实现这一功能。 首先,`allowtransparency`是一个HTML5引入的属性,用于...

    iframe弹窗工具类

    4. **参数调整**:描述中提到用户可以调整窗体,这意味着工具类可能支持传入参数,以定制`iframe`的显示效果,比如大小、位置、透明度等。这些参数可以通过方法调用来设定,使得开发者可以根据应用场景灵活调整。 5...

    asp.net iframe的用法

    `iframe` 在 ASP.NET 应用程序中常常用于实现页面的分层展示、内容的动态加载以及跨域数据交互等场景。下面将详细解释 `iframe` 的使用方法及其相关知识点。 1. **基本结构与属性** - `width`: 定义 `iframe` 的...

    ASP.NET iframe 的通用用法

    实现背景透明 为了使 `&lt;iframe&gt;` 内容与外部页面背景融合,可以使用 `allowtransparency` 属性。 ```html &lt;iframe id="transparentFrame" src="transparentBody....

    flex-iframe-1.4.1.zip

    4. **高度定制**:开发者可以通过API和CSS样式来定制iframe的外观和行为,如边框、填充、透明度等,满足各种设计需求。 5. **跨域支持**:尽管同源策略限制了iframe与父页面的交互,但Flex-Iframe提供了一种跨域...

    div,iframe拖动功能

    透明div的大小和位置应与iframe相同,以实现视觉上的无缝拖动效果。 ```html &lt;iframe id="draggableIframe" src="iframe_content.html" style="position: absolute; width: 500px; height: 500px;"&gt;&lt;/iframe&gt; ``...

Global site tag (gtag.js) - Google Analytics