接下来介绍几种png图片在ie6中不透明的解决办法
1、用自己的png,让ie6一边去吧 首先制作png图片的时候,另存为一个gif图片,因为ie6是支持gif图片透明,然后在css定义
.pngtest{ background:url(mark.png); _background:url(mark.gif);}
优点:方便、快捷,使用超简单
缺点:对于png图片只是某些局域透明,该方法比较奏效,但图片要是半透明的话,这种方法就实现不了
该方法延伸的另外一种解决办法:用ps或者其他图片编辑工具把png图片保存为8位格式的,这样ie6就支持透明了
2、css滤镜实现png图片半透明 .pngwrap{ padding:80px; background:green;}.pngtest{ width:165px; height:50px; overflow:hidden; text-indent:-9999em;background:url(http://www.qmtx3.com/data/mark/mark.png) no-repeat;_background:none;_filter:progid:dximagetransform.microsoft.alphaimageloader(src='http://www.qmtx3.com/data/mark/mark.png' sizingmethod='scale' enabled=true);}
测试ie6利用css滤镜解决png图片透明问题
代码说明:_前缀的css属性只有ie6能识别,至于为什么要加上_background:none;,原因是前面定义的background图片的层深(可以理解为属性的z-index),比filter的要高,就会把filter定义的图片挡住,所以这里要让ie6的背景为none,ps:filter中的图片路径可以为远程图片路径,也可以是相对路径,如果使用相对路径,那应该是相对于页面的路径而非css
优点:不需要js补丁,图片维护成本低,因为就一张png图片
缺点:filter定义的图片不支持 background-position:;(定位) background-repeat:;(平铺)属性,所以不能使用css sprite技术,且该方法不能应用于img标签上,当应用于链接a标签上时有时会导致链接无法点击的情况,此时需要定义该a标签position:relative
3、htc插件png图片ie6任我行 从5.5版本开始,internet explorer(ie)开始支持web 行为的概念。这些行为是由后缀名为.htc的脚本文件描述的,它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到html页面上的任何元素上去。详细的htc文件介绍请稳步
下载ie6浏览器png图片透明htc插件
复制iepngfix.htc和blank.gif文件到你网站目录(复制 blank.gif、iepngfix.htc、iepngfix_tilebg.js(该文件是支持position和repeat属性必不可少的)到放置到某个位置;)
定义将会使用png图片的标签上定义,如下css样式
img,div{behavior:url(iepngfix.htc);}
修改iepngfix.htc中iepngfix.blankimg = 'images/blank.gif';路径为你的图片路径
让ie6浏览器加载js文件
优点:配置好这个,那整个站点要使用就很方便了,一次配置,终身受用
缺点:配置相对方法,网站会多出三个文件,不支持元素hover等伪类,不能使用css sprite技术,页面加载初期还是会看到png图片透明区域是灰色的
4、css版js解决方法 该方法也需要一个透明的blank.gif图片,第三方法压缩包中有,这里不单独提供了,定义css样式
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 = blank.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);}
代码说明:this.src = blank.gif 路径也是相对于页面文件的,而非css文件
优点:方法相对简单
缺点:需要添加一个透明图片blank.gif,仅支持img标签即不支持元素设置的png背景图片,不支持元素hover等伪类,刚加载时也会出现灰色
5、原生态javascript解决办法 javascript解决ie6 png图片不透明的插件比较多,看个人喜好选择使用了
插件一:iepngfix
下载ie6浏览器png图片透明iepngfix插件
让ie6浏览器加载js文件
插件二:dd_belatedpng
该插件应该算是真正意义上的插件了,其使用方法很插件化
下载ie6浏览器png图片透明dd_belatedpng插件
本博备份:dd_belatedpng.js
使用方法:
dd_belatedpng.fix(.pngtest,#pngtest,.pngtest img,.pngtest:hover);
fix()参数传递要透明元素 或者子元素,该方法和jquery选择$使用基本相同,只是多个元素间分隔用的是,而jq用的是空格,为了更方便可以在文件结尾加上
w3cfuns的解决方法是,在每个用到png的标签都加上id或class,然后写成
window.onload = function(){ dd_belatedpng.fix(.pngfix,.pngfix:hover);}
这样在页面中在需要透明的元素上加class=pngfix xx bbb,class中只要包含有pngfix就可以了
优点:支持img标签,css sprite、背景、平铺、伪类,不需要配置啥,引入js就可以使用,赞一个
缺点:加载初期png图片会出现灰色
插件三:evpng
该插件使用方法包括优缺点都跟dd_belatedpng相同,不再详述
下载ie6浏览器png图片透明evpng插件
插件四:jquerypngfix插件
下载ie6浏览器png图片透明jquerypngfix插件
博客备份:jquerypngfix
修改pngfix.js文件中blankgif: 'images/blank.gif'透明gif图片路径为相对页面路径
让ie6浏览器加载js文件
优点:支持img、css背景
缺点:需要jquery库支持,不支持css sprite、平铺、伪类,加载初期会出现灰色
有了这种方法htc的解决方案,显得多于了,不过这里介绍的htc解决ie6 png透明问题只是htc功能的冰山一角,htc在其他方面的应用远远比这强大的多
参考:
http://www.w3cfuns.com/forum.php?mod=viewthread&tid=297
http://www.cnblogs.com/rock506/archive/2010/11/30/1892067.html
http://www.xuanfengge.com/ie6-png-transparency-solution.html