如何实现Iframe透明

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

代码如下:

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; }
</>


本文转自 netcorner 博客园博客,原文链接:http://www.cnblogs.com/netcorner/archive/2009/12/16/2912038.html   ,如需转载请自行联系原作者


相关文章
|
3月前
|
存储 前端开发 UED
动态样式问题之客户端进行样式复用如何解决
动态样式问题之客户端进行样式复用如何解决
25 0
|
5月前
|
安全 搜索推荐 UED
什么是iframe?请讲述一下iframe框架的优缺点?
什么是iframe?请讲述一下iframe框架的优缺点?
99 0
|
安全 定位技术
什么是iframe?请讲述一下iframe的优缺点?
什么是iframe?请讲述一下iframe的优缺点?
77 0
|
JavaScript 前端开发
javascript封装函数:解决win10缩放和布局推荐125%网页无法自适应的解决方案
javascript封装函数:解决win10缩放和布局推荐125%网页无法自适应的解决方案
199 0
|
Web App开发 编解码 前端开发
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
146 0
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
|
前端开发 JavaScript
为iframe正名,你可能并不需要微前端
任何新技术、新产品都是有一定适用场景的,它可能在当下很流行,但它不一定在任何时候都是最优解。
784 0
为iframe正名,你可能并不需要微前端
|
Web App开发 JavaScript 前端开发
从浏览器渲染原理,说一说如何实现高效的动画
从浏览器渲染原理,说一说如何实现高效的动画
262 0
从浏览器渲染原理,说一说如何实现高效的动画
|
前端开发
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
|
JavaScript
iframe通信案例
vue项目中使用iframe通信的代码示例
165 0