北单波胆推荐专家|北单和竞彩14场的区别
 
您现在所在位置:主页 > 服务项目 > 网站建设 > 网站建设知识 >

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

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

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

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

1.通过CSSHack技术处理;

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

background:url(http://www.west258.com/public/upLoad/inke_dreamweaver.png);

结果预览如下:

非IE6及IE6以上版本显示:

 

 

IE6及以下版本显示:

 

 

解决方案:

b)利用IE?#21496;?#23558;IE6引入图片,?#21496;?#24341;入图片是路径是相对于HTML文档本身,而不是相对于CSS文件,语法如下: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="inke_dreamweaver.png");

代码写到这里,我们测试IE6还是没有透明,因为我们虽然设置了?#21496;?#24341;入图片,但是background也同样加载了此图片,又因为background的图层比?#21496;?#35774;置的高,所以才没有显示出来。 所以我们得出的结论就是当我们使用filter的时候,就要使background失效,因此我们可以使用CSSHack来解决此问题, 只需要将IE6的background:none;即可,那么可以得出的代码如下:

_background:none; /*此代码只有IE6识别*/

又因为filter只在IE6下让其产生作用,IE6+版本的浏览器虽然?#24425;?#21035;filter,但是png透明是没有?#19994;?#38382;题的,所以我们同样将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;使其呈现?#20013;停?#21542;则将为默认的鼠标状态。

优点:

1、绿色无插件;

2、效率高,速度快;

3、网速慢的时候,不会出现先?#19994;?#20877;透明的情况,支持远程图片;

4、支持Hover等伪类,但是得使用两张图片,网速慢的情况下,会导致第二张图片暂时无法显示,因为还没有完全载入;

缺点:

1、不支?#21046;?#38138;,虽然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的时候才调用执?#20889;薐avaScript:

加到页面中间。

优点:

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

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

缺点:

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

2、加载了一个庞大的jQuery类库;

3、多库共存的时候可能会出现问题;

4、不支?#21046;?#38138;;

5、不支持CSS Sprite;

6、当文件载入之前,会先暂?#32972;?#29616;?#19994;?

7、不支持Hover等伪类;

使用情况:

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

3.Javascript编写的PNG图片库;

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

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

使用方法:

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

加到页面中间。

优点:

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

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

3、不支持背景平铺;

缺点:

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

2、不支持CSS Sprite;

3、不支持Hover等伪类;

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

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

    西安唐华精工环境工

  • 陕西出版集团

    陕西出版集团

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

    西安金泰展览展示有

  • 美果设计培训中心

    美果设计培训中心

  • 长安教育网

    长安教育网

西安网站建设,西安网站制作,西安网站推广

建站?#35748;擼?29-87576500
联系人:15249183019 (赵经理)
地址:陕西省西安市长乐西路17号第?#26408;?#21307;大学3区综?#19979;?楼
网址:www.ykjdg.tw
QQ:350795135

服务项目:网站建设网站托管微信公众平台开发/营销搜索引擎优化域名主机邮箱400电话平面设计竞价推广App制作及开发POS机销售企业彩铃短信群发


总部?#20309;?#23433;市长乐西路17号第?#26408;?#21307;大学3区综?#19979;?楼
业务外联部:  钟楼  东郊  西郊  南郊  北郊
?#26102;啵?10032        QQ:350795135   1021809792
电话:029-87576500    15249183019
网址:www.ykjdg.tw       邮箱:[email protected]

 
北单波胆推荐专家 千里马计划软件时时彩 pc蛋蛋开奖可以控制吗 时时安卓计划免费版 辽宁35选7开奖号码 山东福彩晓艳之声 山西快乐十分手机助手 皇冠炸金花 河北燕赵福彩排列七 彩经网重庆时时三星彩走势图 山西福利快乐10分