利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的

接下来介绍几种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任我行

<q>从5.5版本开始，Internet Explorer（IE）开始支持Web 行为的概念。这些行为是由后缀名为.htc的脚本文件描述的，它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。</q>详细的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文件

<!--[if IE 6]><script type="text/javascript" src="../js/iepngfix_tilebg.js"></script><![endif]-->

优点：配置好这个，那整个站点要使用就很方便了，一次配置，终身受用

缺点：配置相对方法，网站会多出三个文件，不支持元素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文件

<!--[if IE 6]><script type="text/javascript" src="js/iepngfix.js"></script><![endif]-->

插件二：DD_belatedPNG

该插件应该算是真正意义上的插件了，其使用方法很插件化

下载IE6浏览器PNG图片透明DD_belatedPNG插件

本博备份：DD_belatedPNG.js

<!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG.js"></script><![endif]-->

使用方法：

DD_belatedPNG.fix(".pngtest,#pngtest,.pngtest img,.pngtest:hover");
<!--[if IE 6]>
    <script type="text/javascript" src="js/DD_belatedPNG.js"></script>
    <script language="javascript" type="text/javascript">
    window.onload = function(){
        DD_belatedPNG.fix("*");
    }
    </script>
<![endif]-->

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插件

<!--[if IE 6]>
    <script type="text/javascript" src="js/EvPng.js"></script>
    <script language="javascript" type="text/javascript">
    window.onload = function(){
        EvPNG.fix("*");
    }
    </script>
<![endif]-->

插件四：jQueryPngFix插件

下载IE6浏览器PNG图片透明jQueryPngFix插件

博客备份：JqueryPngFix

修改pngfix.js文件中blankgif: ‘images/blank.gif‘透明GIF图片路径为相对页面路径

让IE6浏览器加载JS文件

<!--[if IE 6]><script type="text/javascript" src="js/pngfix.js"></script><![endif]-->

优点：支持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

时间： 2024-10-13 02:28:32

利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的的相关文章

利用JS和CSS的覆盖特性来解决文件冲突问题

随着项目规模的增大,协作开发也越来越长见,协作开发时间久了就会遇到一个恶心的文件冲突问题. 假设一个HTML文件引用了两个外部JS文件,而这两个外部JS文件你没有修改的权限,你只有HTML文件的修改权限, 两个外部JS文件都定义了window.onload事件.代码假设如下: <script type="text/javascript" src="a.js"></script> <script type="text/javas

利用js将 json对象在textarea中赋值与展示

明明很简单的东西,可惜网上一大堆废话.在此记录,转需. jsonStr = JSON.stringify(jsondata,null,4); example: <!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html class="no-js ie6" lang

利用js取到下拉框中选择的值

现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </summary> public enum AdministratorRole { [Display(Name = "平台管理员")] PlatformAdministrator = 1, [Display(Name = "加盟商")] JoiningTrader

利用 ffmpeg 的 maskedmerge 滤镜, 从视频中提取移动对象

ffmpeg -i background.png -i video.mkv -filter_complex " color=#00ff00:size=1280x720 [matte]; [1:0] format=rgb24, split[mask][video]; [0:0][mask] blend=all_mode=difference, curves=m='0/0 .1/0 .2/1 1/1', format=gray, smartblur=1, eq=brightness=30:contr

WebView加载完网页之后利用js进行网页刷新，解决webview显示图片适应所有的机型

android: /** * 自动以的webviewclient * @author jwguo * */ private class MyWebViewClient extends WebViewClient { @Override public void onPageFinished(WebView view, String url) { // TODO Auto-generated method stub view.loadUrl("javascript:var imgs = docume

JS与CSS实现遮罩层及弹出层效果

其实就是事先在网页里加入两个div框,控制显隐实现的功能. 以下为实现代码(非本人原创,网上找的,我对CSS不感冒): <!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/xht

浅谈CSS和JQuery实现鼠标悬浮图片放大效果

对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3和HTML,Java的小伙伴不要绕道~~~ 言归正传,那么我们首先要完成什么样的图片处理呢? 一.CSS3图片的放大 css3中,有一个属性transform,官方的解释是:允许向元素应用2D或3D的转换.这些转换当然就包含旋转.缩放.移动或倾斜了.有兴趣的同学可以继续了解http://www.w3

css实现你的网页图片半透明效果

<style type="text/css"> <!-- .clarity {  filter: Alpha(Opacity=25, FinishOpacity=100, Style=3, StartX=0, StartY=1, FinishX=1024, FinishY=768); } --> </style> 首先在你的网页中建立一个样式,然后在把这个样式用在你的图片上.至于代码的意思请往下看!!! 也许你已经注意到了Alpha(Opacity=

ASP.NET中母版页引用外部js或css文件无效,提示对象未定义解决方法

最近做网站用了一个js+css实现的带有二级菜单的导航条,在母版页创建好后,子页面调用出现了许多奇怪的问题,多方查证后的最终解决方案和大家分享下.... 1.路径问题 如果是一个单独的aspx页面调用此文件路径会是 1 <link type="text/css" rel="stylesheet" href="navigator/css/shou.css" /> 2 <script type="text/javascri