IE6中Png格式图片透明

js实现方法

 代码如下 复制代码

document.write('<script type="text/javascript" id="ct" defer="defer" src="javascript:void(0)"></script>');var ct=document.getElementById("ct");ct.onreadystatechange=function(){pngfix()};pngfix=function(){var els=document.getElementsByTagName('*'),ip=/.png/i,al="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='",i=els.length,uels=new Array(),c=0;while(i-->0){if(els[i].className.match(/unitPng/)){uels[c]=els[i];c++;}}if(uels.length==0)pfx(els);else pfx(uels);function pfx(els){i=els.length;while(i-->0){var el=els[i],es=el.style,elc=el.currentStyle,elb=elc.backgroundImage;if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;es.width=el.width;es.filter=al+el.src+"',sizingMethod='crop')";el.src=clear;}else{if(elb.match(ip)){var path=elb.split('"'),rep=(elc.backgroundRepeat=='no-repeat')?'crop':'scale',elkids=el.getElementsByTagName('*'),j=elkids.length;es.filter=al+path[1]+"',sizingMethod='"+rep+"')";es.height=el.clientHeight+'px';es.backgroundImage='none';if(j!=0){if(elc.position!="absolute")es.position='static';while(j-->0)if(!elkids[j].style.position)elkids[j].style.position="relative";}}}}};};

2.页面头部，引入此js文件。

 代码如下 复制代码
<script type="text/javascript" src="你的命名文件.js"></script>

3.添加clear.gif到你的images 文件夹中.在js文件中,修改"var clear="images/clear.gif" 路径,为你存放clear.gif的文件路径.

这中间是【】clear.gif图片，1*1的非常小。

这样你的整个项目的png图片都实现了透明效果.的确非常简单吧?就3个步骤,就实现了整个站点所有png的透明效果.

纯css实现方法二

IE5.5+的 AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型。

 

解决方法

首先，为你的图片外套一个DIV层，像这样:

 代码如下 复制代码

<body> <div class=”flower”></div> </body>

然后，在CSS文件里面写入:

 

 代码如下 复制代码

 body {background-color:#000}

div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}

呃，这是指Mozilla Firefox,要让其在IE6下面正常显示，你应该在<head>和</head>之间写入:

 代码如下 复制代码

<!–[if gte IE 5]>

<style type="text/css">

div.flower {

background:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);

}

</style>

<![endif]–>这样，就OK了,下面是加了上面代码后的IE显示图:

方法三，我自己使用的方法

 代码如下 复制代码

correctpng.js

// JavaScript Document

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='"+mypng+"', sizingMethod='crop')";
            document.all[i].style.backgroundImage = "url('')";
   //alert(document.all[i].style.filter);
         }                                             
      }
   }
}

html

<head>
...
<script type="javascript" src="correctpng.js"></script>

<!--[if IE 6]>

<script>

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", correctPNG);
window.attachEvent("onload", alphaBackgrounds);
}

</scrpit>

<![endif]-->

</head>

注 这个js方法不支持重复背景，如果背景重复的话就只能显示一个，别的都支持

时间： 2024-07-30 15:25:33

IE6中Png格式图片透明的相关文章

IE6下的PNG图片透明问题解决方法

ie6下的png图片透明问题解决方法 简单方法是有,用滤镜,但我在firefox下不能正常浏览,况且又耗资源,还不是web标准所提倡的,所以,弃之. filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/1.png', sizingmethod='crop'); 这里是设置你所需要透明图片容器的名字,包括 a:hover (别写错了 :d) <script type="text/网页特效">

在IE和VB中支持png图片透明效果的实现方法(vb源码打包)_javascript技巧

1,使用js文件使IE支持png图片透明效果. pngfix.js: 复制代码 代码如下: var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) function fixPNG(myImage) { if ((version >= 5.5) && (version < 7) && (document.body.filt

Android加载html中svg格式图片进行显示

最近做的一个项目是把assets目录中的html显示出来,但是因为html里面有一些工程图片,虽然我用ViewPager和PhotoView,进行显示放大了,但是因为工程图片的线条较多还是比较模糊.所以后来就想用svg图片来进行显示,至于svg是什么,我这里就不做多的说明,可以去网上搜一搜看看.因为svg和png jpg是不同的,没办法用glide(我图片加载框架用的是glide)进行加载,所以我就只能另想办法了,最后找到一个开源库,解决了我的问题,下面我也是用开源库做的,但是有几个坑需要注意:

png24格式图片在ie6中透明

  图片透明,锯齿问题是重构人员很头疼的问题,每当遇到这样的问题都让我感觉到不知道从哪入手,虽然能解决这些问题,但是总感觉多少有点缺点,最近遇到这方面的问题,总结了几种实现一些透明小图标的锯齿问题:png8格式的透明背景图片,会让浏览器在先显示的过程中图片边缘会有一些锯齿情况,png24可以解决这些锯齿问题,但是ie6不支持png24透明,不过利用ie6的hack问题有两种解决的办法:  代码如下:  <div class="pwdTipsBg"></div> 

ie6兼容.png-关于.png格式图片在ie6中的兼容问题

问题描述 关于.png格式图片在ie6中的兼容问题 为什么在淘宝或者其他比较牛掰的网站上看到.png格式的图片兼容ie6,他们是怎么做到的: 有些是这么处理的,其他浏览器就是.png在ie6里面用相应的.gif格式的图片,但是同样是用.gif格式的图,别人的很圆滑没得锯齿,而我自己做的锯齿特别明显,这是怎么处理的呢? 解决方案 在header加以下代码 [removed][removed] [removed] DD_belatedPNG.fix('div, ul, img, li, input

解决ie6下png图片透明的完美方法

看了很多网上有关解决ie6下png图片透明的文章,很多都是只解决了页面上插入png图片或css背景调用,而且都没用透明效果,在ie6下仅实现了去除灰底色.今天特下载网上一些优秀页面进行分析整合,整理了两套相当有效的解决方案,可以同时支持插入图片或css背景调用问题. 更新下载版本说明: 1."ie6-png-2(filter)"文件中,滤镜控制调用背景透明和js控制插入图片透明不能同时出现,这样在不同浏览器下会有问题,可以分开使用: 2."ie6-png-1(js)"

js实现IE6浏览器PNG图片透明方法总结

例1 有时候按钮并不能存成jpg,因为jpg不透明: 有时候渐变并不能存成gif,因为gif会有颗粒: 所以很多时候,我们要用到png格式,但是IE6并不兼容PNG图片的透明或者是透明度. 而且分为两种情况,一种是PNG图片背景,另一种是插入式的PNG图片. 现在提供解决"插入式的PNG图片"透明问题. 解决办法是在页面头部里插入一段JS即可. 个人标记一下"招聘语音聊天室管理员页面"应用了此方法.  代码如下 复制代码 <script language=&q

如何在Word2007文档中批量设置图片格式

很多时候,我们需要在Word文档中插入一些图片,但如何对这些图片进行处理,却是一个比较复杂的问题.例如现在需要将其设置为居中,如果一个一个手工设置居中的话,那效率之低是可想而知,有没有办法也能批量完成呢? 我们可以分两种不同的情况来进行解决,这里以Word 2007为主同时适当结合Word 2003进行说明: 1.嵌入式图片 如果文档中的图片,选中后四周出现了8个黑色的控制块,如图1所示,那么就表示这些图片是属于嵌入式的. 图1 对于嵌入式的图片,无论是Word 2007或是Word 2003,

如何将winXP电脑中的BMP图片文件修改为jpg格式？

  我们知道,Windows系统中所包含的文件格式是很多样的,就拿咱们比较熟悉的一些文件格式来举例吧!文本文件,咱们就有word还有txt,图片文件就有bmp.jpg,当然,咱们这里无法完全的介绍出来,但是另一方面,虽然每种文件的格式比较多,但是在一定的条件,却可能只有一种格式是标准的,可以使用的,那么这个时候,咱们就需要对文件的格式进行转换了.例如今天这位使用winXP电脑的用户咨询说,要如何才能将自己XP电脑中个BMP图片文件修改为jpg格式,下面,小编就来介绍一个比较快捷的方法吧! 1.首