`
阅读更多

要嵌入的框架:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
	 width: 800px;
	 height: 600px;
	 background: #f60;
}
</style>
</head>
<!--
	正常情况下iframe的背景色是白色
	当框架页面有一个大的背景图或背景色时
	iframe区域并不能继承框架页面的背景
	这就需要让iframe背景色透明
	<body style=" background-color:transparent;">
-->
<body style=" background-color:transparent;">
<p>阅谁问君诵,水落清香浮。</p>
<p>阅谁问君诵,水落清香浮。</p>
<p>阅谁问君诵,水落清香浮。</p>
<p>阅谁问君诵,水落清香浮。</p>
<p>阅谁问君诵,水落清香浮。</p>
<p>阅谁问君诵,水落清香浮。</p>
</body>
</html>

 

演示的页面:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: url(bg.jpg);">
	<!--
    	设置IE下的iframe背景透明 allowTransparency="true"
    -->
	<iframe src="box.html" width="800" height="600" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</body>
</html>

 

PS:兼容IE6+,火狐,谷歌,欧朋

 

效果图:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 大小: 271.7 KB
0
0
分享到:
评论

相关推荐

    iframe背景透明的设置方法

    本文收集各种关于解决iframe 背景透明设置方法与实例分析

    jQuery wBox插件下载

    背景透明度可以根据实际情况进行调节,甚至不设置背景 可以根据需要添加wBox标题 支持设置窗口位置,默认为在中心显示 支持callback函数 支持html内容自定义 img灯箱看图功能 支持在wBox显示#ID的内容 支持Ajax页面...

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    2.2 HTML 5增强的iframe元素 34 2.3 HTML 5保留的通用属性 40 2.4 HTML 5新增的通用属性 44 2.5 HTML 5新增的结构元素 48 2.6 HTML 5新增的语义元素 55 2.7 HTML 5头部和元信息 59 2.8 HTML 5新增的拖放API ...

    从入门到精通HTML5——PDF——网盘链接

     10.2.1 设置背景音乐——bgsound 211  10.2.2 设置循环播放次数——loop 212  10.3 添加多媒体文件 213  10.3.1 添加多媒体文件标记——embed 213  10.3.2 设置自动运行——autostart 214  10.3.3 设置媒体...

    UIWebView的使用代码

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

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -参考http://www.cnblogs.com/sanshi/archive/2009/09/04/1560146.html#1635830 +添加对extjs3.0中所有语言的支持。 -ExtAspNet扩展的多语言包在js\languages\extaspnet目录下,目前只有en,zh_CN,zh_TW三种实现...

    IBM WebSphere Portal门户开发笔记01

    17、设置PAGE-AREA区域背景为透明 127 18、设置PAGE-AREA区域的宽度 127 19、设置左侧导航页面相对标签的缩进 128 20、PORTLET之间间隙的调整 129 21、WCM 主题中获取登录用户的UID信息 129 22、配置是否自动加载...

    ExtAspNet_v2.3.2_dll

    -参考http://www.cnblogs.com/sanshi/archive/2009/09/04/1560146.html#1635830 +添加对extjs3.0中所有语言的支持。 -ExtAspNet扩展的多语言包在js\languages\extaspnet目录下,目前只有en,zh_CN,zh_TW三种实现...

    JavaScript Table行定位效果

    如果td是背景透明的话显然不太美观,最好是找一个合适的颜色来填充。 程序用的方法是,从当前td开始找,如果背景是透明的话,就再从父节点中找,直到找到有背景色为止。 一般来说透明的属性值是"transparent",但在...

    SAPOnAzureTalk-podcast

    ****听下面的播客集或在您收听播客的地方订阅( , , 等)**** &lt;iframe src =“ ” sandbox =“ allow-forms ...背景:透明无重复滚动0%0%;“ height =“ 450px” frameborder =“ 0”&gt; &lt;/ iframe&gt;

    Popelt:Popelt - 轻量级响应动态模态弹出 jQuery 库

    动态叠加背景颜色和不透明度 使用简单 IE7+兼容性 极轻量级(仅压缩约 5kb) 例子 var MyPopup = new Popelt({ title: 'Pop some cash', content: ''Hey wasup! This is my content.' }).show(); 方法 方法名称 ...

    C#编程经验技巧宝典

    4 &lt;br&gt;0008 为程序设置版本和帮助信息 4 &lt;br&gt;0009 设置Windows应用程序启动窗体 5 &lt;br&gt;0010 设置Web应用程序起始页 5 &lt;br&gt;0011 如何设置程序的出错窗口 5 &lt;br&gt;0012 如何进行程序调试 6 ...

    js使用小技巧

    透明背景 &lt;IFRAME src="1.htm" width=300 height=180 allowtransparency&gt;&lt;/iframe&gt; 获得style内容 obj.style.cssText HTML标签 document.documentElement.innerHTML 第一个style标签 document.styleSheets...

Global site tag (gtag.js) - Google Analytics