视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
利用Js或Css滤镜实现IE6中PNG图片半透明效果IE6PNG妥妥的_html/css
2020-11-27 15:56:18 责编:小采
文档


接下来介绍几种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/12067.html

http://www.xuanfengge.com/ie6-png-transparency-solution.html

下载本文
显示全文
专题