png圖片有很好的品質，陰影效果也不會有雜邊，很流暢。如果插入網頁的話可以給網站內容增色不少！更重要的是在不增加圖片容量大小的情況下提高了頁面的圖片的質量。對于有復雜背景，如在有顏色過渡背景上插入不規則邊框的圖片，帶來極大和便利！

　　但目前IE中對于插入的透明背景的png的圖片是不能正常顯示的，IE會自動給".png"格式的圖片加個灰色背景。解決這個的方法是增加javascript，具體方法有兩種：

　　第一種：把下面的代碼放在head區就可以解決問題了。?

<script?language="javascript">? 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);? </script>

??

　　第二種：把這段代碼單獨加在一張圖片上：?

<span style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='你的圖片名稱.png',sizingMethod='scale');"></span>

?

?

?

目前大部分瀏覽器對PNG的支持并不完善,IE雖然可以顯示PNG圖片，但如果PNG圖片中含有透明部分，那么透明部分的顯示就不正常了。

解決這個問題大致有以下方法(其原理都是通過AlphaImageLoader濾鏡來解決)。

方法一:

<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png);width:200px;height:50px"></div>

點評:這種方法雖然較好的解決了IE 5+的瀏覽器，但卻得本來能正常顯示透明PNG圖片的FireFox無法正常顯示!

方法二:

<script type="text/javascript">
// PNG糾正控件 1.0 For IE 5.5或更高.
// 作者:舜子

function isIE(){
if (navigator.appName!="Microsoft Internet Explorer") {return false}
return true
}

function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images
var LW=img.width
var LH=img.height
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
img.style.filter+="progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img.src+", sizingmethod=scale);"
img.src="/images/transparent.gif"//transparent.gif為1px*1px的透明gif圖片
img.width=LW
img.height=LH
}
}
}
if (isIE()) {window.attachEvent("onload", correctPNG);}
</script>


點評:這種方法確實能解決這個問題，但是如果不是在本地調試，通常需要一段時間的轉換!


方法三:

<div id="header"><!--此DIV為需要插入PNG圖片的區域-->
<script type="text/javascript">
if (navigator.appName!="Microsoft Internet Explorer") {
document.write("<img src=/"/images/header.png/" width=/"200/" height=/"50/" alt=/"站長吧 Master8.NET/" />");
} else {
document.write("<img style=/"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale);width:200px;height:50px;/" src=/"{$rootpath}/images/transparent.gif/" width=/"200/" height=/"50/" alt=/"站長吧 Master8.NET/" />");
}
</script>
<div>
點評:事實上網頁中絕對需要使用透明PNG圖片的地方并不多，所以如果你的網頁中僅僅是一兩處使用透明PNG圖片，建議用這種方法。

如果瀏覽者禁用了js,方法二和三當然失去了作用。針對方法三，可以做一些完善:

<div id="header">
<div id="Index_header">圖片簡要說明,正常瀏覽本站請不要禁用js</div>
<div>

<script type="text/javascript">
if (navigator.appName!="Microsoft Internet Explorer") {
document.getElementById('logo').innerHTML="<img src=/"/images/header.png/" width=/"200/" height=/"50/" alt=/"站長吧 Master8.NET/" />"
} else {
document.getElementById('logo').innerHTML="<img style=/"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale);width:200px;height:50px;/" src=/"/images/transparent.gif/" width=/"200/" height=/"50/" alt=/"站長吧 Master8.NET/" />"
}
</script>

總結

以上是生活随笔為你收集整理的JS使png背景图片透明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。