【免费】ie6png透明实现方法资源-CSDN文库

共8个文件

png：2个

gif：2个

htc：1个

需积分: 0 40 浏览量 2011-08-08 10:38:28 上传评论收藏 359KB RAR 举报

在早期的网页设计中，IE6（Internet Explorer 6）浏览器因其对PNG图像格式透明度的支持问题，给开发者带来了不少困扰。PNG（Portable Network Graphics）格式的图片在其他现代浏览器中能够很好地支持透明效果，但在IE6下，PNG-24格式的图片会出现背景不透明或者颜色失真的现象。为了解决这个问题，开发者们提出了一些解决方案，其中“iepngfix”是一个常见的解决工具。 PNG格式分为PNG-8和PNG-24两种，PNG-8支持简单的颜色索引和透明，而在PNG-24中则提供了丰富的色彩和Alpha通道透明，但IE6对PNG-24的透明处理存在问题。这主要是由于IE6不支持Alpha透明，而只支持一个全局的索引透明，因此导致PNG-24的半透明效果无法正确显示。 “iepngfix”是一种JavaScript库，它通过动态修改页面元素的CSS和HTML结构来实现对IE6中PNG透明的支持。该库的基本原理是利用CSS滤镜（filter）属性，为IE6浏览器添加特定的样式，从而使得PNG图片的透明部分能够正确显示。使用iepngfix的步骤大致如下： 1. 引入iepngfix库：你需要在你的HTML文档中引入iepngfix的JavaScript文件，通常将其放置在`<head>`标签内，确保在所有引用PNG图片的CSS样式之后。 ```html <script src="path/to/iepngfix.htc"></script> ``` 这里的`path/to/iepngfix.htc`应替换为你实际存放iepngfix库文件的路径。 2. 应用iepngfix：接下来，你需要在需要透明效果的PNG图片的CSS样式中添加特定的类名，例如`iepngfix`，并设置`behavior`属性引用iepngfix库。 ```css .iepngfix { behavior: url(path/to/iepngfix.htc); } ``` 3. 调整图片样式：对于需要透明效果的PNG图片，确保它们的`display`属性设置为`block`或`inline-block`，因为iepngfix库要求图片元素具有宽度和高度。 ```css img.iepngfix { display: block; } ``` 4. 验证效果：刷新IE6浏览器查看效果。如果图片的透明部分正确显示，那么iepngfix就已经成功地解决了IE6的PNG透明问题。虽然iepngfix在当时是一个非常有用的解决方案，但随着IE6的逐渐淘汰以及现代浏览器的普及，开发者现在更多地转向了对现代浏览器兼容性更好的解决方案，如使用CSS3的`rgba()`颜色函数和`opacity`属性，或者使用渐进增强和优雅降级的策略来处理浏览器兼容问题。需要注意的是，iepngfix在一些复杂布局或有特定CSS样式的情况下可能表现不佳，因此在现代开发中，尽量避免对过时浏览器进行过多的适配，而是引导用户升级到更安全、功能更完善的浏览器。然而，对于仍然需要支持IE6的项目，iepngfix仍然是一个值得考虑的工具。

资源详情

资源评论

资源推荐

收起资源包目录

ie6透明实现.rar （8个子文件）

ie6透明实现

blank.gif 49B

iepngfix.htc 5KB

checkerboard.gif 99B

focus790.rar 178KB

index.jpg 16KB

index.html 2KB

transparent.png 5KB

jb51.png 157KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" /> <meta name="description" content="此代码内容为IE6下PNG背景透明的方法，属于站长常用代码，更多图片特效代码请访问脚本之家JS代码频道。" /> <title>IE6下PNG背景透明的方法_脚本之家</title> <style type="text/css"> body{background-image:url(checkerboard.gif)}; img, div, input { behavior: url("iepngfix.htc") }; </style> </head> <body style="text-align:center"> <p><img src="jb51.png"/></p> <div style="text-align:center; clear:both; margin:5px auto"> <p>代码整理：<a href="http://www.jb51.net/" target="_blank">脚本之家</a>　更多相关效果，请到脚本之家 <a href="http://www.jb51.net/jiaoben/guanggao1.html" target="_blank">脚本下载</a>栏目</p> <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> <p>脚本之家整理。</p> <p><script src="/js/js-preview-728x90.js"></script><br /><br /><br /><center><script src="/js/tj.js"></script></center></p> </div> <p></p> <p><p>iepngfix.htc的使用方法：</p> <p>1、下载脚本脚本，将其中的iepngfix.htc和blank.gif解压缩到合适的目录内，.htc即Html Components，该文件需要在CSS中被调用；blank.gif是一个1×1像素的透明GIF图片，缺少该文件会使<img>标签插入的PNG图象显示为红色的叉烧包。</p> <p>2、在iepngfix.htc中修改blank.gif的路径，var blankImg =‘blank.gif的正确路径’，这是惟一一个需要修改的配置。</p> <p>3、在css中将需要使用透明PNG的元素与.htc文件关联。例如：*{behavior: url(iepngfix.htc) }</p> <p>通过以上三步，IE6就能支持透明PNG图片了。注意：请使用IE6测试该代码效果。</p></p> <p></p> </body> </html>