解決ie6/7/8iframe背景透明的問題

技術小胖子發表於2017-11-08

根據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，如需轉載請自行聯絡原作者


相關文章