IE6浏览器支持100%透明的PNG格式的图片,但是Alpha透明的PNG很是让人头痛。网上有很多的修正方法,有滤镜+hack的方法,有JS的方法。
注意:这个方法只支持<img src=”…” alt=”” />的图片插入方式,不支持背景图片!
这里给大家介绍一种网上比较流行使用较多的一种JS方法:
XML/HTML代码
- function?correctPNG() ??
- { ??
- ???for(var?i=0;?i<document.images.length;?i++) ??
- ???{ ??
- ???var?img?=?document.images[i] ??
- ???var?imgimgName?=?img.src.toUpperCase() ??
- ???if?(imgName.substring(imgName.length-3,?imgName.length)?==?”PNG”) ??
- ???{ ??
- ???var?imgID?=?(img.id)???”id=‘”?+?img.id?+?”‘?”?:?”” ??
- ???var?imgClass?=?(img.className)???”class=‘”?+?img.className?+?”‘?”?:?”” ??
- ???var?imgTitle?=?(img.title)???”title=‘”?+?img.title?+?”‘?”?:?”title=‘”?+?img.alt?+?”‘?” ??
- ???var?imgStyle?=?“display:inline-block;”?+?img.style.cssText ??
- ???if?(img.align?==?”left”)?imgStyle?=?“float:left;”?+?imgStyle ??
- ???if?(img.align?==?”right”)?imgStyle?=?“float:right;”?+?imgStyle ??
- ???if?(img.parentElement.href)?imgStyle?=?“cursor:hand;”?+?imgStyle? ??
- ???var?strNewHTML?=?“<span?”?+?imgID?+?imgClass?+?imgTitle ??
- ???+?”?style=\””?+?”width:”?+?img.width?+?”px;?height:”?+?img.height?+?”px;”?+?imgStyle?+?”;” ??
- ???+?”filter:progid:DXImageTransform.Microsoft.AlphaImageLoader” ??
- ???+?”(src=\'”?+?img.src?+?”\’,?sizingMethod=‘scale’);\”></span>” ??
- ???img.outerHTML?=?strNewHTML??
- ???ii?=?i-1 ??
- ???}; ??
- ???}; ??
- }; ??
- ??
- if(navigator.userAgent.indexOf(“MSIE”)>-1) ??
- { ??
- window.attachEvent(“onload”,?correctPNG); ??
- }; ??
- ??
或者使用下面这段代码:
?
JavaScript代码
- function?correctPNG()?//?correctly?handle?PNG?transparency?in?Win?IE?5.5?&?6. ??
- { ??
- ????var?arVersion?=?navigator.appVersion.split(“MSIE”) ??
- ????var?version?=?parseFloat(arVersion[1]) ??
- ????if?((version?>=?5.5)?&&?(document.body.filters))? ??
- ????{ ??
- ???????for(var?j=0;?j<document.images.length;?j++) ??
- ???????{ ??
- ??????????var?img?=?document.images[j] ??
- ??????????var?imgName?=?img.src.toUpperCase() ??
- ??????????if?(imgName.substring(imgName.length-3,?imgName.length)?==?“PNG”) ??
- ??????????{ ??
- ?????????????var?imgID?=?(img.id)???“id='”?+?img.id?+?“‘?”?:?“”??
- ?????????????var?imgClass?=?(img.className)???“class='”?+?img.className?+?“‘?”?:?“”??
- ?????????????var?imgTitle?=?(img.title)???“title='”?+?img.title?+?“‘?”?:?“title='”?+?img.alt?+?“‘?”??
- ?????????????var?imgStyle?=?“display:inline-block;”?+?img.style.cssText? ??
- ?????????????if?(img.align?==?“left”)?imgStyle?=?“float:left;”?+?imgStyle ??
- ?????????????if?(img.align?==?“right”)?imgStyle?=?“float:right;”?+?imgStyle ??
- ?????????????if?(img.parentElement.href)?imgStyle?=?“cursor:hand;”?+?imgStyle ??
- ?????????????var?strNewHTML?=?“<span?”?+?imgID?+?imgClass?+?imgTitle ??
- ?????????????+?“?style=\””?+?“width:”?+?img.width?+?“px;?height:”?+?img.height?+?“px;”?+?imgStyle?+?“;”??
- ?????????????+?“filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”??
- ?????????????+?“(src=\'”?+?img.src?+?“\’,?sizingMethod=’scale’);\”></span>”? ??
- ?????????????img.outerHTML?=?strNewHTML ??
- ?????????????j?=?j-1 ??
- ??????????} ??
- ???????} ??
- ????}???? ??
- } ??
- window.attachEvent(“onload”,?correctPNG);??
把以下代码保存为correctpng.js?
?在网页头部调用
?
XML/HTML代码
- <script?language=“JavaScript”?src=“correctpng.js”?type=“text/javascript”></script>??
这样在页面中<img src=”…” alt=”” />的图片插入方式就支持Alpha透明的PNG了
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂