您现在所在位置:主页 > 服务项目 > 网站建设 > 网站建设知识 >

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

时间:2012-12-23 11:38     点击:次     文章来源:西安网站建设|设计     [关闭]

笔者精选了3中解决方案,也是目前正在使用的方法。针对不同情况选择方案,基本所有问题都解决了。 1.通过CSSHack技术处理; a)书写正常的CSS代码,通过background样式属性引入图片,这样
 

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

1.通过CSSHack技术处理;

a)书写正常的CSS代码,通过background样式属性引入图片,这样所有的浏览器均使用了此PNG图片;

background:url(http://www.west258.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.west258.com/webJs/js/jquery.pngFix.zip

使用方法:

由于此js只有使用IE6时才有用,所以为了让我们的页面更加高效的执行,我们可以将上方代码修改如下,只有IE6的时候才调用执行此JavaScript:

加到页面中间。

优点:

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.west258.com/webJs/js/Png.zip

使用方法:

由于此js只有使用IE6时才有用,所以为了让我们的页面更加高效的执行,我们可以将上方代码修改如下,只有IE6的时候才调用执行此JavaScript:

加到页面中间。

优点:

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

2、支持背景图,支持img;

3、不支持背景平铺;

缺点:

1、额外加入了js文件和图片文件,增加http请求;

2、不支持CSS Sprite;

3、不支持Hover等伪类;

转载时请注明来源:互成网络

  • 西安唐华精工环境工程有限公司

    西安唐华精工环境工

  • 陕西出版集团

    陕西出版集团

  • 西安金泰展览展示有限公司

    西安金泰展览展示有

  • 美果设计培训中心

    美果设计培训中心

  • 长安教育网

    长安教育网

主营业务: G3云推广 网站建设 小程序开发 APP开发 微信公众号开发 400电话 免费注册公司/代理记账 网站托管


总部:西安市长乐西路17号第四军医大学3区综合楼4楼
业务外联部:  钟楼  高新  北郊
邮编:710000        QQ:350795135   1021809792
电话:15249183019
网址:www.west258.com       邮箱:zff_by@163.com