锐客网

深圳网站建设公司教你解决ie6/ie7/ie8iframe背景透明的问题

发表日期:2018-08-25 作者:小锐 浏览次数:

最近做了一个项目,涉及到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代码:
window.onload = function(){
var ifra=document.getElementsByTagName(''''IFRAME'''');
for(var i=0,l=ifra.length;i<l;i++) {
ifra[i].setAttribute(''''allowTransparency'''',''''true'''');
}
}

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

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

如没特殊注明,文章均为锐客网原创,转载请注明来自  https://www.wangzhan500.com/news/2540.html

标签:
锐客网客服

锐客网咨询热线 咨询热线

13798391694

0755-23772759

在线咨询
锐客网微信扫码咨询

微信扫码咨询

锐客网QQ咨询 QQ咨询 锐客网QQ咨询 邮件咨询
返回顶部 返回顶部