IE6中PNG图片半透明效果可以通过使用滤镜(filter)来实现。
使用自己的PNG,让IE6一边去吧
方法 | 描述 | 优点 | 缺点 |
制作PNG图片时另存为GIF图片 | IE6支持GIF图片透明,在CSS中定义背景图片为GIF格式。.pngtest{ background:url(mark.png); _background:url(mark.gif);} | 方便、快捷,使用超简单 | 对于PNG图片只是某些局域透明,该方法比较奏效,但图片要是半透明的话,这种方法就实现不了。 |
CSS滤镜实现PNG图片半透明
方法 | 描述 | 优点 | 缺点 |
使用CSS滤镜属性 | .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);} | 不需要JS补丁,图片维护成本低,因为就一张png图片 | filter定义的图片不支持 background-position:;(定位) background-repeat:;(平铺)属性,所以不能使用CSS Sprite技术,且该方法不能应用于img标签上,当应用于链接a标签上时有时会导致链接无法点击的情况,此时需要定义该a标签position:relative。 |
HTC插件PNG图片IE6任我行
方法 | 描述 | 优点 | 缺点 |
使用HTC插件 | 从5.5版本开始,Internet Explorer(IE)开始支持Web 行为的概念,这些行为是由后缀名为.htc的脚本文件描述的,它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去,下载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图片透明区域是灰色的。 |
CSS版JS解决方法
方法 | 描述 | 优点 | 缺点 |
使用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.backgroundImage = "none")),this.pngSet=true);} | 方法相对简单 | 需要添加一个透明图片blank.gif,仅支持img标签即不支持元素设置的PNG背景图片,不支持元素hover等伪类,刚加载时也会出现灰色。 |
原生态javascript解决办法
方法 | 描述 | 优点 | 缺点 |
使用原生态javascript解决办法 | javascript解决IE6 PNG图片不透明的插件比较多,看个人喜好选择使用了,插件一:iepngfix,下载IE6浏览器PNG图片透明iepngfix插件,让IE6浏览器加载JS文件,插件二:DD_belatedPNG,该插件应该算是真正意义上的插件了,其使用方法很插件化,下载IE6浏览器PNG图片透明DD_belatedPNG插件本博备份:DD_belatedPNG.js, | 插件化,易于使用 | 需要额外的插件,可能会增加页面加载时间。 |
相关问题与解答
1、为什么需要在CSS中添加_background:none;
?
解答:在CSS中添加_background:none;
是为了确保在IE6中的滤镜效果能够正常显示,由于前面定义的背景图片的层深(可以理解为属性的z-index)比filter的要高,如果不设置_background:none;
,filter定义的图片会被前面的背景图片挡住,导致滤镜效果无法显示。
2、为什么使用HTC插件时,页面加载初期会看到PNG图片透明区域是灰色的?
解答:在使用HTC插件时,页面加载初期会看到PNG图片透明区域是灰色的,这是因为HTC插件在页面完全加载之前不会立即生效,这是一个常见的性能问题,通常可以通过优化页面加载速度或者预加载必要的资源来减轻这一现象的影响。
以上就是关于“利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的”的问题,朋友们可以点击主页了解更多内容,希望可以够帮助大家!