PNG透明背景圖片的無(wú)界應(yīng)用2008-11-16 03:36PNG 圖片在網(wǎng)站設(shè)計(jì)中是不可或缺的部分，最大的特點(diǎn)應(yīng)該在于 PNG 可以無(wú)損壓縮，而且還可以設(shè)置透明，對(duì)于增強(qiáng)網(wǎng)站的圖片色彩效果有重要的作用。
但為什么 PNG 圖片卻沒(méi)有 GIF 和 JPG 圖片的使用來(lái)得廣泛呢，這個(gè)禍因應(yīng)歸屬于微軟的 IE 瀏覽器（Firefox 和 Opera 對(duì) PNG 支持的比較好，而現(xiàn)在瀏覽器的主流IE6 卻無(wú)法很好的支持）。不過(guò)微軟在最近也開(kāi)始改過(guò)自新了，新出的的 IE7 可以很好的支持 PNG，可以想象在未來(lái)的網(wǎng)絡(luò)世界，PNG 圖片的重要性將會(huì)更加凸顯。
但在大家還在絕大多數(shù)的使用 IE6 的時(shí)候，我們又怎樣在 IE6 的世界去完美使用 PNG 圖片呢（PNG 圖片的時(shí)候最重要的地方在于 PNG 透明背景圖片的運(yùn)用）。我們應(yīng)該慶幸我們是幸福的！IE5.5+ 的 AlphaImageLoader 濾鏡為通向 png 提供了一個(gè)道路，如果他載入的是 PNG(Portable Network Graphics) 格式，則 0%-100% 的透明度也被提供。但 IE5.0 無(wú)法支持屬性，那只有完全絕望了，不過(guò)絕望的只是幾個(gè)，得到是絕大數(shù)，我們應(yīng)該知足，知足才會(huì)常樂(lè)。
現(xiàn)在我們將通過(guò) Hack 和 AlphaImageLoader 濾鏡來(lái)實(shí)現(xiàn) IE6 下的 PNG 透明背景圖片，不過(guò)由于 filter 的使用存在一定的性能問(wèn)題，所以盡量少用。
先熟悉下濾鏡的語(yǔ)法：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
屬性：
enabled：可選項(xiàng)。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。true | false

true： 默認(rèn)值。濾鏡激活。
false：濾鏡被禁止。
sizingMethod：可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡作用的對(duì)象的圖片在對(duì)象容器邊界內(nèi)的顯示方式。

crop：剪切圖片以適應(yīng)對(duì)象尺寸。
image：默認(rèn)值。增大或減小對(duì)象的尺寸邊界以適應(yīng)圖片的尺寸。
scale：縮放圖片以適應(yīng)對(duì)象的尺寸邊界。
src：必選項(xiàng)。字符串(String)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用。

Firefox、Opera、IE7 等完全支持 PNG 透明圖片的瀏覽器，而 IE6 不能很好識(shí)別，所有我們可以通過(guò)這來(lái)定義Firefox、Opera、IE7 等瀏覽器中 PNG 圖片的樣式。如下
#png {background: url(絕對(duì)路徑/images/bg.png) repeat;}而對(duì)于 IE6，我們都通過(guò)濾鏡的方法來(lái)定義。我們通過(guò)只有 IE6 才識(shí)別的下劃線（_），來(lái)定義 IE6 瀏覽器中的濾鏡。如下：
#png {
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizinMethod='scale', src="絕對(duì)路徑/images/bg.png");
_background:none;
}這樣綜合起來(lái)的最后方法就是：
#png {
background: url(絕對(duì)路徑/images/bg.png) repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="絕對(duì)路徑/images/bg.png");
_background:none;
}不過(guò)需要注意的一個(gè)地方：
使用 AlphaImageLoader 后該區(qū)域的超鏈接和按鈕會(huì)失效，解決的方法：對(duì)鏈接或按鈕直接設(shè)置相對(duì)位置，讓它們浮動(dòng)于濾鏡區(qū)域的上面。
參考文獻(xiàn)：http://support.microsoft.com/kb/294714/zh-cn

?

?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

如果在網(wǎng)頁(yè)中直接插入png圖片想使其透明只需加入以下js代碼，整個(gè)頁(yè)面內(nèi)的所有直接插入的png圖片都可以實(shí)現(xiàn)透明：

<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;}

============================================

IE6不支持PNG半透明圖片的缺陷為web設(shè)計(jì)帶來(lái)了極大的不便，之前曾經(jīng)介紹過(guò)用濾鏡+hack的方法實(shí)現(xiàn)顯示PNG，不過(guò)實(shí)現(xiàn)起來(lái)相當(dāng)繁瑣。還有一種網(wǎng)上比較流行的方法，更加簡(jiǎn)便，下面詳細(xì)介紹這種方法：

把以下代碼保存為correctpng.js

function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images
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
};
};
};

if(navigator.userAgent.indexOf("MSIE")>-1)
{
window.attachEvent("onload", correctPNG);
};

在網(wǎng)頁(yè)的頭部引用一下

<SCRIPT language=JavaScript
src="correctpng.js"
type=text/javascript></SCRIPT>
?

轉(zhuǎn)載于:https://www.cnblogs.com/commas/archive/2010/12/15/1907190.html

總結(jié)

以上是生活随笔為你收集整理的随笔（png)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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