首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

IE6上PNG图片透明(alpha通道)的5种方法

2012-10-29 
IE6下PNG图片透明(alpha通道)的5种方法想特别说明一下,IE6与生俱来就支持png8的索引色透明度,但不支持png

IE6下PNG图片透明(alpha通道)的5种方法

想特别说明一下,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://support.microsoft.com/kb/294714/zh-cn go

测试实例:http://blog.gulu77.com/demo/200809/test_AlphaImageLoader/

2、PNG Transparency in IE

使用简介:相对来说比较简洁,使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。

官方原文:http://codingforums.com/archive/index.php?t-80555.html go

测试实例: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://www.twinhelix.com/css/iepngfix/ go

测试实例:http://blog.gulu77.com/demo/200809/test_iepngfix/

4、IE7/IE8 JavaScript library

使用简介:ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库,使微软的IE的行为像一个Web标准兼容的浏览器,支持更多的W3C标准。

官方原文:http://code.google.com/p/ie7-js/ go

测试实例:http://blog.gulu77.com/demo/200809/test_ie7-js/

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

5、还发现一个方法:belatedPNG 。具体方法是将下面的代码插到<head></head>之间:

<!–[if IE 6]>
<script src="DD_belatedPNG_0.0.7a-min.js"></script>
<script>
DD_belatedPNG.fix(””*””);
</script>
<![endif]–>

此方法能同时解决图片和背景问题。

所用到的 js 文件可以点击这里下载(5.41 kb)。

热点排行