可憐的IE6，不支持PNG圖片透明，
這已經(jīng)是其眾多“BUG”中，不是那么顯眼的一個(gè)，
但也是讓部分人頭痛的一個(gè)了。
（今天在機(jī)房那破機(jī)器上IE6忘了抓圖了，現(xiàn)在想給大家看效果也難啊。）
發(fā)個(gè)PNG大家看看。?? 如果用IE6的朋友，請(qǐng)?jiān)谙旅婊貜?fù)截個(gè)圖！謝謝啦。
[attach]641886[/attach]
想查看區(qū)別的，請(qǐng)到這個(gè)頁(yè)面
http://www.54caizi.org/demo/enablePngImages.html

所以，只有借助濾鏡來(lái)實(shí)現(xiàn)透明了。

方法一： 復(fù)制內(nèi)容到剪貼板
代碼:
<div align="center" style="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png圖片路徑 ',sizingMethod='image'); " width="100px" height="100px"></div>這樣的話，需要在每一PNG都這么做，顯然不合適。而且設(shè)計(jì)的時(shí)候也不直觀。

方法二：
將下面的代碼保存為“png.js” 復(fù)制內(nèi)容到剪貼板
代碼:
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
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
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);然后在網(wǎng)頁(yè)底部加上 復(fù)制內(nèi)容到剪貼板
代碼:
<script type="text/javascript" src="png.js"></script>經(jīng)過(guò)實(shí)際測(cè)試。
這種方法在普通模式下，問(wèn)題不大。

但是問(wèn)題來(lái)了：
1、如果圖片未指明大小（width/height），那么，最終顯示的尺寸將是（0px*0px），也就是說(shuō)：啥也沒(méi)有。
2、如果把圖片放在隱藏層中（<div style="display:none;">...），那么，同上。程序獲得不到圖片大小。

這么一來(lái)，也不能完美解決了。

OK!那么我們來(lái)完善一下吧！

既然獲取不到代碼中的圖片尺寸，我們何不直接讀取圖片的實(shí)際尺寸呢？ 復(fù)制內(nèi)容到剪貼板
代碼:
<!--對(duì)于隱藏層中的圖片，或者其他原因?qū)е聢D片尺寸無(wú)法獲得-->
<!--此時(shí)我們需要讀取圖片的真實(shí)大小-->
<!--以免寬高都為0px而導(dǎo)致圖片不顯示-->
var imgTrueWidth=0;
var imgTrueHeight=0;
if(img.width==0)
{
var imgPng=new Image();
imgPng.src=img.src;
imgTrueWidth=imgPng.width;
imgTrueHeight=imgPng.height;
}我們通過(guò) Image對(duì)象，來(lái)獲得其真實(shí)大小。然后最終代碼如下： 復(fù)制內(nèi)容到剪貼板
代碼:
function correctPNG4IE6()
{
//獲得全部圖片
var imgs=document.getElementsByTagName("IMG");
for(var i=0; i<imgs.length; i++)
{
var img = imgs[i];
var imgName = img.src.toUpperCase();
<!--操作PNG圖片-->
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;

<!--對(duì)于隱藏層中的圖片，或者其他原因?qū)е聢D片尺寸無(wú)法獲得-->
<!--此時(shí)我們需要讀取圖片的真實(shí)大小-->
<!--以免寬高都為0px而導(dǎo)致圖片不顯示-->
var imgTrueWidth=0;
var imgTrueHeight=0;
if(img.width==0)
{
var imgPng=new Image();
imgPng.src=img.src;
imgTrueWidth=imgPng.width;
imgTrueHeight=imgPng.height;
}

<!--用<span>替換<img>標(biāo)簽-->
var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"";
strNewHTML=strNewHTML+"width:" + (img.width==0?imgTrueWidth:img.width) + "px; height:";
strNewHTML=strNewHTML+(img.height==0?imgTrueHeight:img.height) + "px;";
strNewHTML=strNewHTML+imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader";
strNewHTML=strNewHTML+"(src='" + img.src + "', sizingMethod='scale');\"></span>";

<!--執(zhí)行替換-->
img.outerHTML = strNewHTML;

i = i-1;
}
}
}
<!--加載完畢，執(zhí)行代碼-->
window.attachEvent("onload", correctPNG4IE6);

轉(zhuǎn)載于:https://www.cnblogs.com/panjun-Donet/archive/2010/05/04/1727186.html

總結(jié)

以上是生活随笔為你收集整理的IE6不支持PNG图片透明效果的完美解决方案（完善版)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。