本站推荐

Js实现PNG图片在IE下透明的方法

来 源:schillmania.com 作 者:scott 时间:2008-12-05 点击:
loading...

实现原理:

1.为PNG格式的图片建立一个完全相同的gif格式,在编码里面使用gif图片。

2.利用IE支持DXImageTransform.Microsoft.AlphaImageLoader滤镜来使用PNG格式转换gif为png图片,并将png图片作为背景显示,首先检测浏览器,接下来判断class为png的元素,完成替换。

使用方法:
1.在<head></head>之间写入

<script type="text/javascript" src="png.js"></script>
 

2.用类png标记需要使用png格式的地方


首先建立两张同样的图片格式为别为png和gif,一是类库需要,二是防止IE被禁后破坏视觉效果
前景图片

反正就是建立两张格式不同内容相同的图片,PNG这里图片应该用32PNG格式,前面怎么弄都不是,原来问题出在这里!GIF就没有关系啦!

插入图片: <img src="图片.gif" class="png" style="width:宽度px;height:高度px" />

和我一样这里有疑问了吧?为什么不插入图片.PNG,而是图片.gif?我也不懂!呵呵!反正你就插入图片.GIF就可以了,在IE显示他就会透明了。

插入背景:<div class="png" style="width:xxxpx;height:xxxpx;background-image:url(your-image.gif);background-repeat:no-repeat"></div>
 

最后,在</body>前面加入

 <script type="text/javascript">
 pngHandler.init();
 </script>

完成.................

提醒:那个class="png"要记得放进去哦!

这样做png图片使用起来就方便多了,不用重复的去使用IE滤镜,比起手动使用IE滤镜同时加载的图片数量加倍,增加并发连接数

演示:http://www.schillmania.com/projects/png/

其他方法
Fun with Transparent PNG Images
http://www.photoshoplab.com/fun-with-transparent-png-images.html

来源:http://www.2ky.cn/h/17/4747.htm
转载要求注明来源,请尊重作者版权!

关键字: 

会员登陆close X