`

一次性解决PNG透明度在IE6下显示问题的脚本

 
阅读更多

png格式因为其优秀的压缩算法和对透明度的完美支持,成为web中最流行的图片格式之一。
IE6下png的图片不显示透明效果。其他浏览器都挺好的。
为了解决IE6下png图片的般透明效果,的方案是:
一次性解决PNG透明度在IE6下显示问题的脚本

function correctPNG()
   {
   for(var i=0; i<document.images.length; i++)
      {
     var img = document.images[i]
     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
       i = i-1
        }
      }
   }
function alphaBackgrounds(){
   var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
   for (i=0; i<document.all.length; i++){
      var bg = document.all[i].currentStyle.backgroundImage;
      if (bg){
         if (bg.match(/.png/i) != null){
            var mypng = bg.substring(5,bg.length-2);
    //alert(mypng);
            document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://xiaomiya2008.blog.163.com/blog/"+mypng+"', sizingMethod='crop')";
            document.all[i].style.backgroundImage = "url('')";
    //alert(document.all[i].style.filter);
         }                                               
      }
   }
}
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", correctPNG);
window.attachEvent("onload", alphaBackgrounds);
}



它的实现原理是当页面加载完成后,先遍历页面内所有的图片元素,找到后缀为.png的图片,将他们改成span标签,设置为display:inline-block的类型,长宽和原png图片一样,然后配上progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘png 图片路径’,sizingMethod=‘crop’)的滤镜,实现png的透明效果,再遍历页面内所有元素,检查他们是否有png的背景图,如果有,则将背景图去掉,改用滤镜。这种方式调用非常方便,只要将这段代码放入网页中任意地方,当页面加载完成后,png图片都可以实现透明。但他也存在一定问题。
1)当页面全部加载完成前,png图片的透明部分仍然会显示为浅蓝;
2)遍历所有元素,执行效率不高;
3)当png是以背景形式插入网页的,它可能有background-position和background-repeat属性,而滤镜是不支持者两个属性的,如果设置了这两个属性,这两个属性的效果会丢失。

分享到:
评论

相关推荐

    DD_belatedPNG.js解决IE6浏览器下的PNG透明图片显示问题

    总的来说,DD_belatedPNG是JavaScript技术在解决浏览器兼容性问题上的一次创新尝试,它通过JavaScript模拟出原本缺失的功能,使得在旧版IE浏览器上也能呈现现代网页设计的效果。然而,随着浏览器的不断更新换代,...

    ie6-png解决方案1

    而PNG-24格式则提供了更丰富的色彩,但其Alpha通道透明度在IE6下失效。因此,如果你的图片颜色较为简单,转换为PNG-8格式或许就能解决问题。 但是,对于那些需要PNG-24格式透明效果的场景,我们需要采取其他方法。...

    如何让IE 6支持png图片效果.zip

    jQuery特效通常是指使用jQuery创建的视觉效果,而这里提到的jQuery插件可能是专门为解决IE6与PNG透明度问题设计的。 根据压缩包子文件的文件名称列表,"调用方法.txt"可能包含了如何在网页中引入和使用这个jQuery...

    精通CSS

    幸运的是,《精通CSS》一书提供了针对IE5.x及更高版本的PNG透明度解决方案,通过特定的CSS规则或JavaScript脚本,可以在不同浏览器环境中实现一致的透明效果。 综上所述,精通CSS不仅仅是掌握语法那么简单,它更是...

    div+css模版,十分适合初学者

    2. `iepngfix.htc`:这通常是一个解决Internet Explorer浏览器对PNG透明图像支持不完全的问题的脚本。由于IE6等早期版本的IE浏览器对PNG透明处理不佳,这个文件提供了兼容性解决方案。 3. `index.html`:这是网站的...

    面试宝典之吊打面试官系列

    - **问题**: 在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存处理? - **答案**: 请求JS/CSS文件时,可能会经历以下层次的缓存: - 浏览器内存缓存 - ...

    网页设计笔试题.txt

    - **1像素高度显示问题**:IE6默认行为,可通过`overflow: hidden`等方法解决。 - **Flash透明背景**:通过设置Flash参数`wmode="transparent"`实现。 #### 11. 居中元素的CSS技巧 - **居中元素**:通过设置`...

    尚硅谷_前端_面试题

    - **兼容性问题**:如IE下的盒模型问题、某些CSS属性支持度不一致等。 - **解决方法**:使用条件注释、特定浏览器前缀、Polyfill等。 - **常用hack技巧**:如`*zoom: 1`用于IE6-8的兼容性问题。 19. **li与li...

    web前端面试题

    在 css/js 代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次 js 请求一般情况下有哪些地方会有缓存处理?** - 浏览器缓存(如 HTTP 缓存)、服务端缓存、CDN 缓存等都是常见的缓存机制。 **14. 一...

    javascript面试题

    **13、在 css/js 代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次 js 请求一般情况下有哪些地方会有缓存处理?** - 浏览器缓存:本地缓存、服务端缓存。 - CDN 缓存:减少服务器压力。 - HTTP 协议...

    uploadifive上传插件(无需flash)

    4. **进度条显示**:在文件上传过程中,Uploadifive会显示上传进度,让用户了解文件上传的状态,增加了操作的透明度。 5. **自定义样式**:描述中提到,Uploadifive的样式可以根据个人喜好进行修改,开发者可以通过...

    前端笔试面试题目总结.docx编程资料

    - **常见兼容性问题**:如 IE 下的盒模型问题、CSS3 新特性支持度差异、事件模型差异等。 - **解决方案**:使用条件注释、前缀、Polyfills 等方法解决。 #### 前端框架与模型 - **MVC 模型**:Model-View-...

    易语言 茶凉专用模块

    参数 临时透明度, 字节型, 可空, 设置整个窗口的透明度 取值范围是[0,255] 可空为不设定此参数 .参数 临时透明色, 整数型, 可空, (#颜色)指定某颜色为完全透明(完全透明处不属于该窗口) 可空为不指定 .参数 鼠标穿透...

Global site tag (gtag.js) - Google Analytics