在IE浏览器中正确显示PNG透明图片

PNG图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利!

但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。

解决这个的方法是增加javascript。具体方法如下：

把下面的代码放在head区就可以解决问题了。

以下是引用片段：

 

 

 

也可以把这段代码单独加在一张图片上：

以下是引用片段：

style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png',sizingMethod='scale');">

 

-------------------------------------

IE6支持PNG透明(alpha通道)的4种方法

Posted by Gulu77 | Filed under Web Standards

想特别说明一下，IE6与生俱来就支持png8的索引色透明度，但不支持png的 alpha 透明度。而我们一直要解决的是让IE6支持PNG的 alpha 透明度。下面我收集整理了4种方法，但都是以滤镜、Js、css 等作为基础模拟还原效果，虽然没有真正的解决alpha透明度问题，但也总算解决了燃眉之急。

• IE6支持png8透明:

  IE6与生俱来就支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8，因为体积会更小
  
  测试实例：http://blog.gulu77.com/demo/200809/test_IE6png8/

1. AlphaImageLoader 筛选器

   • 使用简介：在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
   • 官方原文：
   • 测试实例：http://blog.gulu77.com/demo/200809/test_AlphaImageLoader/

2. PNG Transparency in IE

   • 使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。
   • 官方原文：
   • 测试实例：http://blog.gulu77.com/demo/200809/test_PNGTransparncyinIE/

3. IE PNG Fix v1.0 / 2.0 Alpha 2

   • 使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。
   • 官方原文：
   • 测试实例：http://blog.gulu77.com/demo/200809/test_iepngfix/

4. IE7/IE8 JavaScript library

   • 使用简介：ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库，使微软的IE的行为像一个Web标准兼容的浏览器，支持更多的W3C标准。
   • 官方原文：
   • 测试实例：http://blog.gulu77.com/demo/200809/test_ie7-js/

   全部实例打包下载：http://blog.gulu77.com/demo/200809/test_png.rar