解決IE6 下背景不透明的問題

應用PNG圖片的透明或半透明的特性能作出很是漂亮的網頁來。Firefox和Opera對PNG的支持很是的好，都是IE卻無視PNG圖片這一特性的「存在」，雖然IE7已經支持都是IE6仍是不行。查了一些資料，基本解決了這一問題，準備應用到PJskin上。 雖然有讓IE6支持PNG透明背景的JS程序，都是否是很方便，仍是用CSS來實現的好。使用到的就是： IE5.5+的AlphaImageLoader濾鏡 語法： filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) 屬性： enabled : 可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true | false true : 默認值。濾鏡激活。 false : 濾鏡被禁止。 sizingMethod : 可選項。字符串(String)。設置或檢索濾鏡做用的對象的圖片在對象容器邊界內的顯示方式。 crop : 剪切圖片以適應對象尺寸。 image : 默認值。增大或減少對象的尺寸邊界以適應圖片的尺寸。 scale : 縮放圖片以適應對象的尺寸邊界。 src : 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數，濾鏡將不會做用。 說明： 在對象容器邊界內，在對象的背景和內容之間顯示一張圖片。並提供對此圖片的剪切和改變尺寸的操做。若是載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。 PNG(Portable Network Graphics)格式的圖片的透明度不妨礙你選擇文本。也就是說，你能夠選擇顯示在PNG(Portable Network Graphics)格式的圖片徹底透明區域後面的內容。 瞭解了以上的內容，能夠寫一段簡單的CSS代碼（還不是徹底正確的代碼）： #div1 {    height: 600px;    width: 260px;    padding: 20px;    background-repeat: repeat;    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png" } 這段簡單的CSS代碼就能夠在IE中正常的顯示PNG透明背景，可是會發如今FF下不會出現背景，分析緣由： AlphaImageLoader濾鏡只能被IE支持，FF是不支持該濾鏡的 有些初次寫的時候不少人會這樣： 在代碼中添加這樣一段： background-image: url(bj1.png); 添加這樣一段代碼雖然能解決FF下的問題，都是IE又出現問題：新的背景會覆蓋在濾鏡的背景之上，致使濾鏡顯示無效，這時候就用到IE和FF對CSS讀取的區別特性了： Firefox、Opera等徹底支持PNG透明圖片的瀏覽器也支持子選擇器（>），而IE不識別（包括IE7），全部咱們能夠經過這來定義Firefox、Opera等瀏覽器中PNG圖片的樣式。代碼以下： html>body #div1 {    background-repeat: repeat;background-image: url(bj1.png); } 同時，咱們經過只有IE才識別的通配符（*），來定義IE瀏覽器中的濾鏡。代碼以下： * #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png") } 而#div1 {}就放一些IE和FF共用的設置來減小代碼文件的大小。最終就是這樣： #div1 {    height: 600px;    width: 260px;    padding: 20px;    background-repeat: repeat;    } /* for ie7 ff*/ html>body #div1 {     background:url(../images/menu1.png) no-repeat; } /* for ie6 */ * #div1 {     background:none;     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu1.png', sizingMethod='crop'); } 須要注意的是：AlphaImageLoader濾鏡會致使該區域的連接和按鈕無效，解決的辦法是爲連接或按鈕添加：position: relative;這樣條代碼，使其相對浮動。AlphaImageLoader沒法設置背景的重複，因此對圖片的切圖精度會有很高的精確度要求。 -------------------------------------------------------------------- 若是在網頁中直接插入png圖片想使其透明只需加入如下js代碼，整個頁面內的全部直接插入的png圖片均可以實現透明： <script language="JavaScript"> 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); </script> -------------------------------------------------------------------- 若是是想使用png作背景透明的話，須要用到css濾鏡和hack： html>body .png { background:url(1.png); width:300px; height:100px; border:#000 solid 1px;} /* ie6 */* html .png { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='1.png');     background:none; width:300px; height:100px; border:#000 solid 1px;}