修改png格式,让IE6支持png图片透明
修改png格式,让IE6支持png图片透明
文 / 商企通-胡睿
网页
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
人员对IE6肯定相当头疼,因为其不支持png图片透明,所以就需要用各种方法来实现让它支持png透明图片。
实现方法也相当的多,这里我推荐一种不需要其他插件,也不需要增加任何代码,只需你的电脑上有PS(photoshop)就可以实现。
下面我们就一步步来实现,首先在IE6和IE8下分别打开一个未被处理过的png图片看看效果:
,
这两张图片都是png格式,并且都为背景都为透明,可以很明显看出,IE6(左)不支持PNG图片透明。
接下来我们要做的就是,用PS打开其中一个png文件,然后依次点击“文件”--“存储为Web和设备所用格式”,快捷键是:Ctrl+Shift+Alt+S,打开后在右侧“预设”里设置:PNG-8 128 仿色
然后点击“存储”,选择存放路径,然后就OK了。最后把这个修改过的png图片替换之前的文件,然后我们再在IE6里打开查看一下:
可以看到IE6下已经能显示透明了,但图片周围似乎还有一圈白色,这个应该是细节问题,由于我不太懂PS,所以细节就没有继续处理。
这里其实没什么原理,因为png有很多版本,比如有:png8,png24,png32,而IE6只支持png8的透明索引,所以我们只需修改下png的格式就行,另外还需注意的就是,在FW(Fireworks)里,导出png图片的格式必须选png32,因为在FW里导出的png32图片在PS里打开是png24。但png8有它的限制,不支持更多的颜色,而且如果在图片很多的情况下,如果手动去一张张修改,肯定很麻烦。所以就下面简短的介绍一个简单而有效的办法,
那就是IE6专用的PNG hack——iepngfix.htc。
首先要下载脚本,将其中的iepngfix.htc和blank.gif解压缩到合适的目录内,.htc即Html Components,该文件需要在CSS中被调用;blank.gif是一个1×1像素的透明GIF图片,缺少该文件会使
标签插入的PNG图象显示为红色的叉叉。
然后在iepngfix.htc中修改blank.gif的路径,var blankImg =‘blank.gif的正确路径’。
最后在css中将需要使用透明PNG的元素与.htc文件关联。 例如:*{behavior: url(iepngfix.htc) }
通过以上三步,你的IE6就能支持图片透明了。如果还不行,可以再修改下png图片格式为png8,这样就100%可行了。