解決PNG圖片在IE6中背景不透明的問題

一、解決PNG圖片在IE6中背景不透明的CSS與JS代碼   -   TOP

JS代碼

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) && (document.body.filters)) { for(var j=0; j<document.images.length; j++) { var img = document.images[j] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML j = j-1 } } } } window.attachEvent("onload", correctPNG);

CSS代碼：
 

#id{background:url(圖 片路徑) ;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="圖片路徑");_background:none;}

 

二、解決png圖片在html中做爲IMG標籤使用時，PNG圖片IE6中背景不透明方法 （JS）   -   TOP

一、新建一個JS文件爲iepngfx.js,進以上JS代碼拷貝到JS文件裏
二、在HTML中聲明只有IE6讀取此新建JS文件iepngfx.js中
只容許IE6讀取此JS文件方法：
<!--[if IE 6]>
<script src="images/iepngfx.js" language="javascript" type="text/javascript"></script>
<![endif]-->
三、在html中使用圖片標籤IMG運用PNG圖片，在IE6試試看PNG圖片背景是否透明瞭。

三、解決png圖片做爲網頁背景時，在IE6中背景透明方法 （ CSS）  -   TOP

一樣方法
一、新建JS文件同上，命名爲iepngfx.js,進以上JS代碼拷貝到JS文件裏
二、在HTML中聲明只有IE6讀取此新建JS文件iepngfx.js中
只容許IE6讀取此JS文件方法：
<!--[if IE 6]>
<script src="images/iepngfx.js" language="javascript" type="text/javascript"></script>
<![endif]-->
三、在CSS中運用PNG圖片做爲背景的地方加入如下CSS代碼：

#id{background:url(圖 片路徑) ;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="圖片路徑");_background:none;}

這樣便可解決PNG圖片在HTML中img做爲圖片圖標背景不能透明或PNG圖片做爲網頁背景background運用的同樣實現PNG圖片背景透明。

 

如需轉載，請註明文章出處和來源網址：http://www.divcss5.com/css-hack/c265.shtml

 

 

又：

最近作了一個項目，涉及到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；

以上文章有深圳網絡公司易捷網絡科技編寫，轉載時註明出處，謝謝合做。