您当前的位置:首页 > 新闻中心 > web应用

如何解决IE6PNG图片、背景透明?

  • 点击数:6655 次
  • 更新日期:2012-11-13
  • 来源:科e原创
  • 【启用眼睛保护色】
  • 字体:【小】 【中】 【大】 【B】

笔者精选了3中解决方案,也是目前正在使用的方法。针对不同情况选择方案,基本所有问题都解决了。

1.通过CSSHack技术处理;
a)书写正常的CSS代码,通过background样式属性引入图片,这样所有的浏览器均使用了此PNG图片;
background:url(http://www.internetke.com/public/upLoad/inke_dreamweaver.png);
结果预览如下:
非IE6及IE6以上版本显示:

 

IE6及以下版本显示:

 

解决方案:
b)利用IE滤镜将IE6引入图片,滤镜引入图片是路径是相对于HTML文档本身,而不是相对于CSS文件,语法如下:   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="inke_dreamweaver.png");
代码写到这里,我们测试IE6还是没有透明,因为我们虽然设置了滤镜引入图片,但是background也同样加载了此图片,又因为background的图层比滤镜设置的高,所以才没有显示出来。   所以我们得出的结论就是当我们使用filter的时候,就要使background失效,因此我们可以使用CSSHack来解决此问题,   只需要将IE6的background:none;即可,那么可以得出的代码如下:
_background:none; /*此代码只有IE6识别*/
又因为filter只在IE6下让其产生作用,IE6+版本的浏览器虽然也识别filter,但是png透明是没有灰底问题的,所以我们同样将filter也加上IE6 Hack即可。  
c)最终我们可以得到如下代码:
#pics
{
background:url(../images/W3CfunsLogo.png) no-repeat; /*以下为IE6设置PNG透明代码*/
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="inke_dreamweaver.png"/>
}
注意:inke_dreamweaver.png是相对与当前html文件的路径,而不是与CSS文件的路径。
提示:如果需要使其支持链接的hover,那么需要在CSS中定义:cursor:pointer;使其呈现手型,否则将为默认的鼠标状态。

优点:
1、绿色无插件;
2、效率高,速度快;
3、网速慢的时候,不会出现先灰底再透明的情况,支持远程图片;
4、支持Hover等伪类,但是得使用两张图片,网速慢的情况下,会导致第二张图片暂时无法显示,因为还没有完全载入;

缺点:
1、不支持平铺,虽然filter有sizingMethod="scale", 拉伸缩放模式,但是图片会变形,如果单纯的颜色或简单的渐变色还能横向平铺;
2、不支持Img标签;
3、不支持CSS Sprite;

使用情况:
1、当没有img引入png时可考虑;
2、当没有CSS Sprite需求时可考虑;
3、当没有平铺需求时候可考虑;


2.jQuery插件的诞生;
介绍:jQuery为我们带来了很大的方便,jQuery没有让我们有太大的失望,img和png都同时得以支持,唯一美中不足的还是无法平铺,无法使用CSS Sprite。
插件下载地址:www.internetke.com/webJs/js/jquery.pngFix.zip
使用方法:

由于此js只有使用IE6时才有用,所以为了让我们的页面更加高效的执行,我们可以将上方代码修改如下,只有IE6的时候才调用执行此JavaScript:
<!--[if lte IE 6]>
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
<script type="text/javascript">
$(function(){$(document).pngFix();});
</script>
<![endif]-->

加到页面<head></head>中间。

优点:
1、CSS代码看起来很优雅,只需要引入js进行简单的配置一下就行了,效率还算不错;
2、支持背景图,支持img;

缺点:
1、额外加入了js文件和图片文件,增加http请求;
2、加载了一个庞大的jQuery类库;
3、多库共存的时候可能会出现问题;
4、不支持平铺;
5、不支持CSS Sprite;
6、当文件载入之前,会先暂时呈现灰底;
7、不支持Hover等伪类;

使用情况:
当您的项目中使用jQuery的时可以考虑;


3.Javascript编写的PNG图片库;
介绍:此库通过传递html标签即可实现该标签内的图片或者背景透明,缺点是,不能同时支持a与a:hover透明,只能支持一种模式。同样利用js做切换也不支持滑过效果。

插件下载地址:www.internetke.com/webJs/js/Png.zip

使用方法:

由于此js只有使用IE6时才有用,所以为了让我们的页面更加高效的执行,我们可以将上方代码修改如下,只有IE6的时候才调用执行此JavaScript:
<!--[if IE 6]>
<script type="text/javascript" src="js/Png.js"></script>
<script type="text/javascript">
EvPNG.fix('div, ul, img, li, input, a');
</script>
<![endif]-->

加到页面<head></head>中间。

优点:
1、CSS代码看起来很优雅,只需要引入js进行简单的配置一下就行了,效率还算不错;
2、支持背景图,支持img;
3、不支持背景平铺;

缺点:
1、额外加入了js文件和图片文件,增加http请求;
2、不支持CSS Sprite;
3、不支持Hover等伪类;

转载时请注明来源:科e互联