233
人物
IE6下实现PNG透明。
大家好，欢迎大家光临中电云集帮助中心，在这里大家可以找到很多关于建站技巧的文章和信息，在这里我们来学习一下如何在IE6下实现PNG图片的透明。
首先我们要先了解一下什么是PNG，PNG是一种图像文件存储格式，其目的是试图(原来此处使用了”企图”)替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。 一般应用于JAVA程序中，或网页或S60程序中是因为它压缩比高，生成文件容量小。
通常，我们的站长朋友在使用ps 或fw制作图片时都会忽略一个问题，就是设置PNG图片的输出。PNG有3种输出色位，32位、24位和8位。 先手我们先来看一个案例，看看这3种色位在IE6下会呈现出什么样的效果。 图1为我们的演示logo、图2为IE6下 3种色位的效果，图3为IE7下的效果。
图1
图2
图3
我们很明显可以看到在图2中，IE6下 PNG 24和PNG 32都是不透明的，出现了灰底，而在非高于IE6版本的IE浏览器下或其他独立内核的浏览器下都是可以正常显示的，这样我们得出的一个结论就是 只要将图片保存为PNG8就可以在IE6下实现透明了。
那这里我就来告诉大家如何将一个制作好的图片储存为PNG 8，首先我们在PS上上选择“文件”- “储存为 Web 和设备所用格式”。如图4.
图4
我们在右侧的上方设置要输出的格式为PNG 8，另外大家可以根据自己的需求做一些相应的调整，例如砸变等，使其更能融合到你的网页背景中去，在我们设置好之后就可以点“存储”了，如图5.
图5
上述方法只能应对与普通的没有高级特效的PNG图片，如果是一个有半透明效果的图片我们要怎么来做呢？其实很多高人都通过了JS来实现PNG 32在IE6下的透明，现在就来介绍给大家。首先我们来看一下图6，图6中是一个带有半透明效果的PNG图片。
图6
下面我们先看下半透明效果的 PNG 输出为PNG8 、24、32之后在IE6和IE7下的效果。 图7为IE6下的效果、图8为IE7下的效果。
图7
图8
在图7和图8中我们很明显的看到PNG8的半透明效果丢失了，显然PNG8的方法是没办法满足所有IE6下透明效果的，而PNG24和PNG32有不支持IE6下的透明，现在们可以通过一个JS来显示。
首先我们需要在网页文件的 <head>和</head>之间加上 如下代码
<!–[if IE 6]>
<script src=”JS所在目录/iepng.js” type=”text/javascript”></script>
<script type=”text/javascript”>
EvPNG.fix(’这里填写要生效的CSS样式或HTML标签，如输入img 则会对所有<img src=”xxxx.png”>生效，如写div 则会对所有DIV内的PNG背景生效，如写 #logo 或.logo 则会对单独的css样式中的png背景生效，多个表情或css样式请用半角的逗号分隔开’);
</script>
<![endif]–>
添加好代码后将 iepng.js 放于代码中指定的目录内。 iepng.js下载 ，设置好对应的标签或CSS样式即可。图9为IE6添加JS后的效果。
图9
到这里我们已经看到PNG32和PNG24在IE6下都实现了透明效果。可能在这篇文章中具体的方法还不是很明白，大家可能看不太懂，下面我就把教程中演示的文件实例上传给大家，大家可以看下是如何实现的。 演示实例下载。
如果你有更多的疑问，或者遇到了什么困难可以发送邮件至jiangfei#chinaccnet.com,（将#更换为@）我们会尽快为你提供解决方案。
最后更新：2017-01-04 22:34:41