介绍
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
分享到:
相关推荐
IE6支持PNG
<script type="text/javascript" src="image/ie_png.js"> <script type="text/javascript"> ie_png.fix('.png, .menu ul li a span'); // 第二个参数为含有png的标签id(css) ie_png.fix('.png, .logo span');...
IE6png透明JS
超好用的IE6png透明JS, 截取前端人员永远的痛处!
js_IE6支持png透明解决png_ie6下不透明背景图片
内含插件及使用说明 ie(IE)png半透明插件使用微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性。
<script type="text/javascript" src="iepngfix_tilebg.js"></script>5. 完成 注:可以使用if条件注释语句,使这些文件只在ie6激活,以便在其他浏览器下加快加载速度。 <!--[if lte IE 6]> img, div{behavior:url...
使用方法: 在页面中加入 ... <script type="text/javascript" src="javascript/IE7.js"> <![endif]--> 然后在对应设置background的css中将图片名称加一个"-trans.png" 比如把bg.png改为bg-trans.png
解决ie6下png透明问题 在页面引入这个js文件,让回EvPNG.fix();
ie6中png透明解决方案 js 物有所值,解压,直接点开看png.html
javascript支持ie6 png图片透明
一个javascript代码。如果你的网页中有用到png格式的透明图片,在IE中可能出现不能透明的情况。 在网页代码中加入引用这个脚本就可以解决了。 调用方法:<script src="pngfix.js"></script>
IE6下png透明处理脚本(js),包含了三种方式实现IE6下png不透明的问题,经实测通过。
DD_belatedPNG.js IE6支持png图片透明度的文件使用方法: DD_belatedPNG.fix("标签ID,标签Class,标签名");
IE6PNG透明背景显示灰色--解决方法(unitpngfix.js)
IE6下PNG格式图片透明问题JS代码,详情全在里面
我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间. 然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e-xpression, 再到javascript透明GIF替代.但是这些方法都有一个...