随笔（png)
PNG透明背景图片的无界应用2008-11-16 03:36PNG 图片在网站设计中是不可或缺的部分，最大的特点应该在于 PNG 可以无损压缩，而且还可以设置透明，对于增强网站的图片色彩效果有重要的作用。
但为什么 PNG 图片却没有 GIF 和 JPG 图片的使用来得广泛呢，这个祸因应归属于微软的 IE 浏览器（Firefox 和 Opera 对 PNG 支持的比较好，而现在浏览器的主流IE6 却无法很好的支持）。不过微软在最近也开始改过自新了，新出的的 IE7 可以很好的支持 PNG，可以想象在未来的网络世界，PNG 图片的重要性将会更加凸显。
但在大家还在绝大多数的使用 IE6 的时候，我们又怎样在 IE6 的世界去完美使用 PNG 图片呢（PNG 图片的时候最重要的地方在于 PNG 透明背景图片的运用）。我们应该庆幸我们是幸福的！IE5.5+ 的 AlphaImageLoader 滤镜为通向 png 提供了一个道路，如果他载入的是 PNG(Portable Network Graphics) 格式，则 0%-100% 的透明度也被提供。但 IE5.0 无法支持属性，那只有完全绝望了，不过绝望的只是几个，得到是绝大数，我们应该知足，知足才会常乐。
现在我们将通过 Hack 和 AlphaImageLoader 滤镜来实现 IE6 下的 PNG 透明背景图片，不过由于 filter 的使用存在一定的性能问题，所以尽量少用。
先熟悉下滤镜的语法：
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 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
Firefox、Opera、IE7 等完全支持 PNG 透明图片的浏览器，而 IE6 不能很好识别，所有我们可以通过这来定义Firefox、Opera、IE7 等浏览器中 PNG 图片的样式。如下
#png {background: url(绝对路径/images/bg.png) repeat;}而对于 IE6，我们都通过滤镜的方法来定义。我们通过只有 IE6 才识别的下划线（_），来定义 IE6 浏览器中的滤镜。如下：
#png {
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizinMethod='scale', src="绝对路径/images/bg.png");
_background:none;
}这样综合起来的最后方法就是：
#png {
background: url(绝对路径/images/bg.png) repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="绝对路径/images/bg.png");
_background:none;
}不过需要注意的一个地方：
使用 AlphaImageLoader 后该区域的超链接和按钮会失效，解决的方法：对链接或按钮直接设置相对位置，让它们浮动于滤镜区域的上面。
参考文献：http://support.microsoft.com/kb/294714/zh-cn
如果在网页中直接插入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;}
============================================
IE6不支持PNG半透明图片的缺陷为web设计带来了极大的不便，之前曾经介绍过用滤镜+hack的方法实现显示PNG，不过实现起来相当繁琐。还有一种网上比较流行的方法，更加简便，下面详细介绍这种方法：
把以下代码保存为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);
};
在网页的头部引用一下
<SCRIPT language=JavaScript
src="correctpng.js"
type=text/javascript></SCRIPT>
