解决ie6/7/8iframe背景透明的问题

简介:

根据W3C CSS 2.1 规范规定,'background-color' 特性的默认值为 'transparent',即透明;但是IE6/IE7/IE8中 BODY 元素的背景色不是 transparent,而是 #FFFFFF;


在iframe中这个背景是其本身,不是iframe内的html元素的,所以,只对iframe进行相关设置就能去掉这个背景。


iframe有个allowTransparency的属性,意思是是否允许透明;但是IE6/IE7/IE8中却是白色;所以我们可以这样加上它 <iframe allowTransparency="true" />

如果为了追求更好的保障的话,就要加上iframe{ transparent;}< /p>


但还有一些特殊情况:有时候iframe不是HTML中本身写的,是加载进来的,这时虽然以上的CSS可以生效,但却没法给iframe本身加上allowTransparency属性了,这时候要怎么做?很简单

给它来一段js代码:

1
2
3
4
5
6
window.onload =  function (){
     var  ifra=document.getElementsByTagName( 'IFRAME' );
     for ( var  i=0,l=ifra.length;i<l;i++) {
         ifra[i].setAttribute( 'allowTransparency' , 'true' );
     }
}



至此,以为问题解决。可突然发现还是白色的背景,WHY?那是如前面说的IE6/IE7/IE8中 BODY 元素的背景色不是 transparent的,所以

对iframe里的body也要设置透明化:transparent;


在iframe中设置属性为
<iframe src="left.htm" scrolling="no" allowtransparency=true width="209" height="900" frameborder="0"></iframe>

在left.htm设置<body style="background-color:transparent">

如果不进行设置,则默认的背景色是白色.



      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1226872,如需转载请自行联系原作者


相关文章
|
6月前
|
前端开发
css里面设置body背景图片满屏
css里面设置body背景图片满屏
|
10月前
|
前端开发
CSS背景图片自适应大小
CSS背景图片自适应大小
73 0
|
10月前
|
前端开发
HTML中的背景图片和背景颜色
HTML中的背景图片和背景颜色
65 0
|
前端开发 JavaScript 程序员
基于H5+css+JavaScript实现button悬停时边框滑动
基于H5+css+JavaScript实现button悬停时边框滑动
127 0
基于H5+css+JavaScript实现button悬停时边框滑动
|
移动开发 HTML5
HTML5/CSS3淡入淡出滑块焦点图
在线演示 本地下载
887 0
CSS3鼠标滑过图片3D旋转动画
在线演示       本地下载
1072 0
|
JavaScript 前端开发