`
028wz
  • 浏览: 9540 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

PNG图片 兼容IE FF 等浏览器的代码写法

 
阅读更多
一 PNG透明背景CSS写法

.png
{
background:url(http://www.028wz.net/img/logo.png) left top no-repeat !important; /*For Firefox*/
*background:none;/*For IE7 & IE6*/
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.028wz.net/img/logo.png',sizingMethod='crop');/*For IE6*/
}




二 PNG 透明图片

这里插入一个JS
<script>
// JavaScript Document
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
          }
       }
    }    
}
if(window.attachEvent){
 window.attachEvent("onload", correctPNG);
}else if(window.addEventListener){
 window.addEventListener("load",correctPNG,true);
}else{
 window["onload"]=correctPNG;
}
</script>
<img src="http://www.028wz.net/img/logo.png">



分享到:
评论

相关推荐

    解决PNG图片、PNG背景图片在IE6不兼容问题

    能解决png图片在IE6浏览器不兼容问题。同时能解决png背景图片在IE6浏览器不兼容的问题。简单易懂。急需要导入一个js文件,然后写入需要兼容的标签即可。

    浏览器兼容代码大全

    ### 浏览器兼容代码大全 #### 概述 本文档提供了一系列的代码示例,旨在帮助初学者解决不同浏览器间的兼容性问题。通过本文档的学习,你可以掌握如何编写能够跨浏览器正常显示的网页,包括但不限于CSS样式调整、...

    PNG图片透明兼容IE6和火狐示例

    PNG图片透明兼容性问题在早期的网页设计中是一个常见的挑战,特别是对于Internet Explorer 6 (IE6) 和Firefox等浏览器。PNG(Portable Network Graphics)格式支持24位颜色以及一个额外的透明通道,使得图像可以实现...

    处理IE6浏览器显示.png图片透明度文件

    在互联网的早期,Internet Explorer 6 (IE6) 是广泛使用的浏览器之一,但它存在许多兼容性问题,其中就包括PNG图片透明度的问题。PNG(Portable Network Graphics)是一种支持透明度的图像格式,但在IE6中,它无法...

    png图片在ie6透明代码

    然而,IE6对于PNG图片的透明处理存在严重缺陷,导致PNG图片在该浏览器中无法正常显示透明效果。本文将深入探讨一种用于解决此问题的技术方案——通过JavaScript脚本实现PNG图片在IE6中的正确透明显示。 #### IE6与...

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

    在互联网的早期,Internet Explorer(简称IE)浏览器在处理PNG(Portable Network Graphics)格式的透明图片时存在一些兼容性问题,特别是在IE6及以下版本。这些版本的浏览器无法正确显示24位PNG图像的Alpha透明效果...

    android 图片浏览器 代码

    标题中的"android 图片浏览器 代码"提示我们要关注以下几点: 1. **图片加载库**:在Android上,我们通常不直接使用`Bitmap`对象加载大图,因为这可能导致内存溢出。常见的图片加载库有Glide、Picasso和Fresco,它们...

    IE6png兼容

    IE6png格式兼容,格式兼容希望可以帮助你

    Banner广告图片 (兼容IE6-IE10 火狐 谷歌等浏览器的)

    【标题】:“Banner广告图片(兼容IE6-IE10 火狐 谷歌等浏览器的)” 这篇内容主要关注的是如何创建一个适用于多种浏览器的Banner广告图片,包括了较老版本的Internet Explorer(从IE6到IE10),以及Firefox和...

    ie6 透明图片png兼容js代码 (含示范代码 DD_belatedPNG)

    "ie6 透明图片png兼容js代码"就是针对这一问题提供的解决方案。 `DD_belatedPNG` 是一个JavaScript库,由Dean Edwards开发,专门用来解决IE6对PNG透明图片的支持问题。这个库的工作原理是通过JavaScript模拟PNG ...

    ie6兼容png透明图片

    ie6兼容png透明图片,导入js即可使ie6兼容png透明图片,无需调用。

    JavaScript 瀑布流 吸顶 兼容IE FF Chrome

    在给定的文件中,`css.css`可能包含了瀑布流和吸顶效果的CSS代码,`吸顶条.html`可能是包含吸顶效果HTML结构的文件,而`db.png`和`lszy.png`可能是用于瀑布流布局的示例图片。 为了实现这一效果,你需要在HTML中...

    PNG图片IE6下面解决最好的方法

    总的来说,解决IE6下的PNG问题需要结合多种技术,包括CSS滤镜、图片格式转换、JavaScript库等。随着浏览器更新迭代,这些问题在现代浏览器中已不再显著,但对于维护旧项目或考虑兼容性时,这些知识仍然很有价值。

    IE6浏览器png图片实现透明

    标题"IE6浏览器png图片实现透明"所涉及的知识点主要是关于如何在不支持PNG透明的IE6浏览器上实现PNG图像的透明显示。这一技术通常依赖于JavaScript库,例如我们压缩包中的"png图片ie6下透明js"文件,它可能是一个...

    div转png/jpg格式图片,兼容IE9+及主流浏览器

    为了确保在IE9及以上的浏览器中兼容,需要注意以下几点: - `html2canvas`库在IE9中可能有一些限制,因为它依赖于CSS3的特性,如`transform`和`box-shadow`,这些在IE9中可能不完全支持。因此,需要确保你的CSS样式...

    IE6浏览器完美兼容PNG图片的BUG(包括背景)

    在互联网发展的早期,Internet Explorer 6 (简称IE6) 是占据主导地位的浏览器,然而它在处理PNG(Portable Network Graphics)图像格式时存在一些著名的兼容性问题,这给网页设计和开发带来了不少困扰。PNG是一种...

    ie6图片png完美支持iepngfix

    在IT行业中,尤其是在...总之,iepngfix是针对IE6浏览器PNG透明问题的一种解决方案,通过JavaScript技术实现对PNG图片的透明度支持。虽然如今已不再主流,但在过去,它为许多开发者提供了应对旧浏览器挑战的有效途径。

    ie6_ie7_ie8_ff(火狐)浏览器兼容性

    例如,IE6不支持透明PNG图片、盒模型计算错误等问题;而IE7虽然有所改进,但对CSS的支持仍然有限;到了IE8,虽然引入了更多的标准支持,但默认情况下仍可能退回到IE7的渲染模式,除非页面头部有正确的X-UA-...

    解决PNG图片在IE6中背景不透明方法

    总的来说,解决IE6中的PNG透明问题需要对浏览器兼容性有深入理解,并可能需要借助一些辅助工具。`clear_png.js`是众多解决方案之一,它利用JavaScript和CSS滤镜技术,为开发者提供了一种简单易用的途径,使PNG图片在...

    完美解决png在ie6兼容问题完整示例

    2. **IE6的PNG兼容性问题**:由于IE6的浏览器内核不完全支持PNG24,所以导致透明PNG在IE6下显示时会出现“灰边”或背景不透明的问题。这主要是因为IE6使用了名为“AlphaImageLoader”的滤镜来尝试处理透明PNG,但...

Global site tag (gtag.js) - Google Analytics