如何在ie6/ie7/ie8中实现iframe背景透明

Posted 2020-08-30

最近做了一个项目，涉及到ie8iframe背景透明的问题，做了老半天，才把它搞定的，现在把我的经历贴出来和大家分享：

众所周知的根据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{background: transparent;}，这样你就可以的了。

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

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

 

至此，你以为问题解决。可突然发现还是白色的背景，这是为什么呢?那是因为iframe中的 BODY 元素的背景色不是 transparent的，所以对iframe里的body也要设置透明化：background:transparent；由此可以看出，你要分清情况的，框架要透明，里面的元素也要透明设置的，请记住这个属性：background:transparent；

以上文章有深圳网络公司易捷网络科技编写，转载时注明出处，谢谢合作。