`
John_Kong19
  • 浏览: 278069 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

(转)解决ie6下png图片不透明方法

    博客分类:
  • web
阅读更多
第 1 种方法:定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了。(注意两处图片的路径写法不一样,本例中,icon_home.png图片与html文件在相同目录)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.qq {
height: 90px;
width: 90px;
background-image: url(icon_home.png)!important;/* FF IE7 */
background-repeat: no-repeat;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */
_ background-image: none; /* IE6 */
}
-->
</style>
</head>

<body>

<div class="qq"></div>

</body>
</html>



第 2 种方法: 给img定义样式,页面上所有透明png即自动透明了。(这方法只对直接插入的图片有效,对背景图无效)注意,要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录
请勿大量使用,否则会导致页面打开很慢!!!)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.mypng img {
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
}

</style>
</head>

<body>

换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />
</div>
</body>
</html>


第 3 种方法:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.(注意,这方法也是只对直接插入的图片有效,对背景图无效)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="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) && (version < 7) && (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); 
</script>
<style type="text/css">
<!--
body {
background-color: #9999CC;
}
-->
</style></head>

<body>

把图片换成你自己的图片
<img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 -->
<img src="img/icon_face_05.png" width="30" height="30" />
<img src="img/menu_title_over.png" width="130" height="36" />
</body>
</html>    



方法四


<script language="javascript">
// 修复 IE 下 PNG 图片不能透明显示的问题
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
     var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
     var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
     var imgTitle = (myImage.title) ? "title='" + myImage.title   + "' " : "title='" + myImage.alt + "' ";
     var imgStyle = "display:inline-block;" + myImage.style.cssText;
     var strNewHTML = "<span " + imgID + imgClass + imgTitle

   + " style=\"" + "width:" + myImage.width

   + "px; height:" + myImage.height

   + "px;" + imgStyle + ";"

   + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

   + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
     myImage.outerHTML = strNewHTML;
} }

window.onload=function(){
         document.getElementById("top").style.height=screen.height/5+"px";
        
}//
</script>

用法如下:
<img src="logo.png" width="328" height="325" border="0" onload="fixPNG(this)" />

分享到:
评论

相关推荐

    解决IE6下PNG图片背景色不透明问题的方法

    本文将详细介绍如何解决IE6下的PNG图片背景色不透明问题。 首先,理解问题的原因至关重要。IE6不完全支持PNG8和PNG24这两种PNG格式。特别是PNG24,它包含了24位颜色和一个alpha通道,用于实现半透明效果,但IE6只能...

    解决IE6下PNG不透明的JS代码

    本话题将详细讨论如何使用JavaScript来解决IE6下的PNG不透明问题,以及相关的技术原理和代码实现。 首先,我们需要理解问题的根源。IE6不支持PNG-24(包含Alpha通道,用于实现半透明)的透明特性,但支持PNG-8(8位...

    解决ie6下透明图片不透明问题

    标题提到的"解决ie6下透明图片不透明问题"直指一个历史悠久且颇具特色的难题:Internet Explorer 6(简称IE6)对PNG透明度的支持。在IE6之前,GIF格式常用于实现网页上的透明效果,但其色彩有限,而PNG格式则提供了...

    如何解决IE6下png不透明

    标题“如何解决IE6下png不透明”涉及的是一个经典的前端开发问题,主要与Internet Explorer 6(简称IE6)浏览器对PNG图像格式的支持有关。在IE6中,PNG-24格式的图像存在透明度问题,即不能正确显示半透明效果,这对...

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

    本文将深入探讨这个问题,并提供JavaScript解决方案来实现IE6下PNG图片的透明显示。 首先,我们需要理解为什么IE6不支持PNG透明。PNG-24格式允许半透明和全透明效果,但IE6只支持8位的PNG-8,而这种格式最多只能有...

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

    这篇博文将探讨如何解决这个问题,使PNG图片在IE6中实现背景透明。 首先,我们要理解为什么PNG图片在IE6中会出现透明问题。IE6并不完全支持PNG8和PNG24格式中的Alpha通道,这导致了图片背景无法透明显示。为了解决...

    jquery 解决png ie6不透明

    通过以上步骤,你就可以使用jQuery成功地解决IE6下PNG图片不透明的问题。这个解决方案虽不能完全消除IE6带来的困扰,但至少能让你的网站在古老的浏览器上看起来更加正常和专业。然而,随着现代浏览器的普及,对于新...

    解决PNG图片在IE6下背景不透明的问题

    总的来说,解决IE6下PNG图片背景不透明的问题需要对CSS滤镜有深入的理解,并且要灵活应对可能出现的各种兼容性问题。在现代浏览器广泛使用的今天,虽然IE6的问题逐渐减少,但了解这些历史遗留问题可以帮助我们更好地...

    jquery处理IE6.0中png图片不透明问题+例子(supersleight)

    该插件通过JavaScript技术,使IE6能够正确地显示PNG图片的透明效果,从而使得网页在IE6下也能保持良好的视觉体验。 Supersleight的工作原理是利用CSS滤镜(Filter)属性,将PNG图片转换为VML(Vector Markup ...

    ie6下png图片问题

    解决IE6下的PNG图片不透明问题,通常有以下几种方法: 1. 使用CSS滤镜(Filter): IE6特有的CSS滤镜属性可以解决这个问题。例如,对于一个具有PNG透明背景的元素,可以添加如下样式: ```css .png-fix { ...

    IE 6 下PNG图片实现透明

    以上就是实现IE6下PNG图片透明的几种常见方法。虽然现代浏览器已经不再存在这些问题,但考虑到仍有一部分用户可能还在使用IE6,这些技术对于开发兼容性良好的网站仍然是必要的。在实际应用中,结合条件注释、CSS滤镜...

    ie6下png图片透明方法

    下面我们将详细讨论如何在IE6下使用JavaScript解决PNG图片透明问题。 首先,我们需要理解PNG图片透明的原理。PNG图片支持24位颜色以及8位的alpha通道,也就是所谓的PNG-24格式,它允许图片部分像素具有不同程度的...

    解决png格式的图片在IE6下不透明

    3. **图片替换法**:如果项目允许,可以考虑将PNG图片替换为其他在IE6下支持透明的格式,比如GIF。但是,GIF格式只支持二值透明(非透明/全透明),且压缩效率较低,因此在质量和文件大小上可能会有所牺牲。 4. **...

    IE6下PNG图片透明教程

    本教程将详细介绍如何解决IE6下PNG图片的透明问题。 首先,理解IE6对PNG透明性的不支持是由于其内核的限制。IE6只能正确处理PNG8格式的简单透明,即alpha透明,而对于PNG24格式的半透明(也称为阿尔法通道透明)则...

    IE6下PNG透明代码

    5. **PNG透明修复脚本**:压缩包内的“IE6 PNG处理”脚本可能是一个JavaScript库,如DD_belatedPNG,它通过检测浏览器版本,对IE6下的PNG图片进行特殊处理,使其能够正确显示透明效果。这类脚本通常会分析图片,创建...

    实现IE6下png图片透明JS代码

    为了解决这个问题,开发者们利用JavaScript编写了一些脚本,以实现IE6下PNG图片的透明效果。本文将详细讲解这一技术。 PNG(Portable Network Graphics)是一种无损压缩的位图格式,支持24位色彩和8位透明通道,即...

    处理ie6下png格式透明效果

    处理完IE6下的PNG透明问题后,可能会遇到一些新的挑战,例如性能影响、图片质量下降或是与其它CSS样式的冲突。因此,在应用解决方案时,应进行充分的测试,确保在保持视觉效果的同时,不影响网站的整体性能和用户...

    ie6中png透明解决方案 js

    以上两种方法都可以有效解决IE6下PNG图片透明度的问题,但在实际应用中,考虑到IE6的市场份额逐渐减少,开发者也可能选择仅对现代浏览器提供PNG透明效果,而让IE6用户看到不透明的图片。 这个压缩包中的"ie6中png...

    js修复IE不能显示PNG图片透明背景的方法

    ### js修复IE不能显示PNG图片透明背景的方法 #### PNG图片及其特性 PNG(Portable Network Graphics)是一种常用的位图图形格式,以其高效的压缩算法和对透明度的支持而受到广泛青睐。相较于传统的GIF格式,PNG...

    解决ie6 PNG透明问题——两种方法都好用哦

    本文将详细介绍两种有效解决IE6下PNG图片透明显示问题的方法。 #### 方法一:使用 CSS Hack ##### 原理 这种方法利用了IE6的一个特性,即它会解析特定的HTML注释,并执行其中的JavaScript代码。通过这种方式,我们...

Global site tag (gtag.js) - Google Analytics