`

让IE支持PNG格式的JS库

阅读更多

介绍
http://www.schillmania.com/content/projects/png/
Demo
http://www.schillmania.com/projects/png/

原理
1.为PNG格式的图片建立一个完全相同的gif格式,在编码里面使用gif图片
2.利用IE支持DXImageTransform.Microsoft.AlphaImageLoader滤镜来使用PNG格式转换gif为png图片,并将png图片作为背景显示,首先检测浏览器,接下来判断class为png的元素,完成替换

使用
1.在<head>调用png.js<script type="text/javascript" src="png.js"></script>下载地址:http://www.schillmania.com/projects/png/png-demo.zip
2.用类png标记需要使用png格式的地方
首先建立两张同样的图片格式为别为png和gif,一是类库需要,二是防止IE被禁后破坏视觉效果
前景图片 <img src="your-image.gif" class="png" style="width:XXXpx;height:YYYpx" />背景图片<div class="png" style="width:xxxpx;height:xxxpx;background-image:url(your-image.gif);background-repeat:no-repeat">
</div>
3.在</body>之前加入 <script type="text/javascript">
 pngHandler.init();
 </script>

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

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

分享到:
评论

相关推荐

    IE6png透明JS

    总的来说,“IE6png透明JS”是针对IE6浏览器PNG透明问题的一种技术解决方案,它利用JavaScript库和CSS滤镜来模拟或修复透明效果。随着浏览器更新换代,这个问题逐渐被解决,但对于仍然需要支持IE6的开发者来说,这些...

    让 IE6 支持 PNG 透明

    在早期的网页设计中,IE6(Internet Explorer 6)浏览器对PNG图像格式的透明支持是有限的,尤其是对于PNG-24格式的图像,它只支持简单的索引颜色透明,而对于真彩色的PNG图像则无法实现透明效果。这给网页设计师带来...

    超好用的IE6png透明JS

    "超好用的IE6png透明JS"是一个专门解决这一问题的JavaScript库。这个库通过JavaScript代码来模拟PNG透明效果,使得在IE6浏览器中可以正确显示具有透明通道的PNG图片,从而提升了用户体验。虽然现在IE6的使用率已经...

    IE6支持PNG.js

    IE6支持PNG

    ie_png.js---实现ie6中css调用的png图片透明

    &lt;script type="text/javascript" src="image/ie_png.js"&gt; &lt;script type="text/javascript"&gt; ie_png.fix('.png, .menu ul li a span'); // 第二个参数为含有png的标签id(css) ie_png.fix('.png, .logo span');...

    处理ie6下png格式透明效果

    2. **JavaScript库**:像`DD_belatedPNG`这样的JavaScript库,可以在运行时为IE6添加PNG24透明支持。只需在页面头部引入这个库,然后应用到需要透明效果的PNG元素上。 3. **使用PNG8**:如果可能,可以将PNG24转换...

    js_IE6支持png透明解决png_ie6下不透明背景图片

    在早期的Internet Explorer 6(简称IE6)浏览器中,PNG格式的图片存在一个众所周知的问题:它不支持24位PNG图像的透明效果。这个问题给网页设计师带来了许多困扰,因为PNG格式的透明特性在其他现代浏览器中是被广泛...

    ie6图片png完美支持iepngfix

    "iepngfix"是一个专为解决这个问题的JavaScript库,由Dean Edwards开发。这个库通过动态修改CSS样式和利用滤镜技术,使得IE6能够近似地支持PNG图片的透明性。在网页中引入iepngfix.js文件,并调用其方法,可以实现在...

    ie6中png透明解决方案 js

    其中,一种常见的解决方案是使用James Padolsey的JavaScript库,它通过检测浏览器版本并插入适当的CSS滤镜来解决IE6下的PNG透明问题。例如,可以使用以下代码: ```javascript function fixPNG() { if (window....

    IE低版本支持png透明问题

    对于“IE低版本支持png透明问题”,这个问题主要涉及到Internet Explorer(IE)浏览器早期版本(如IE6、IE7)对PNG图像格式透明度的支持。PNG是一种高质量的位图格式,其支持alpha通道透明度,但在IE6等旧版本中,对...

    IE 6 下PNG图片实现透明

    除了CSS滤镜,还可以使用JavaScript库如DD_belatedPNG或PNGFix等,它们专门用于解决IE6的PNG透明问题。这些库通过JavaScript动态添加滤镜,同时兼容PNG-8和PNG-24格式。 例如,DD_belatedPNG库的使用方法: 1. ...

    解决ie6下png格式的兼容

    其中,"DD_belatedPNG.js"是一个常用的JavaScript库,它专门为解决IE6中的PNG透明问题而设计。 DD_belatedPNG.js是David DeSandro编写的一个JavaScript插件,它通过模拟PNG Alpha通道来实现PNG透明效果。这个库的...

    IE6 PNG 透明处理方法

    在IE6中,PNG图像格式的透明度支持并不完善,导致许多设计师在创建具有半透明或背景透明效果的网页时遇到困难。这篇博文和相关文件提供了针对这个问题的解决方案。 PNG是一种流行且广泛使用的图像格式,它支持24位...

    IE6 PNG 完美支持

    针对这个问题,一种常见的解决方案是使用"iepngfix"工具,这通常是一个JavaScript库或者CSS技巧,它可以动态修改页面元素,以使IE6正确理解PNG的透明度。例如,使用iepngfix.js库,可以在页面加载完成后应用修复,...

    ie 下png 透明图片 兼容解决方案

    2. **JavaScript库**:可以使用JavaScript库,如`DD_belatedPNG`或`PNGFix.js`,来解决这个问题。例如,将`ie下实现png透明js`这个文件引入到你的HTML中,然后应用到相应的元素上。这种方法适用于动态加载的PNG图像...

    js支持ie6 png图片透明

    - DD_belatedPNG.js库:这是一个JavaScript库,通过脚本方式解决IE6的PNG透明问题。它利用CSS背景位置和图像来模拟透明效果,适用于PNG-24和PNG-8。 - IE6_PNG_position(定位):在使用JavaScript库处理透明问题时...

    IE6PNG透明背景显示灰色--解决方法(unitpngfix.js)

    unitpngfix.js是一个专门针对IE6浏览器的JavaScript库,它的主要功能是修复IE6对PNG-24格式图片透明度的支持。该脚本通过动态修改CSS样式和HTML结构,使得IE6能够正确渲染PNG图像的透明部分,从而解决了灰色背景的...

Global site tag (gtag.js) - Google Analytics