滤镜解决方案
介绍:滤镜从IE4.0被微软正式引入,所以我们可以使用滤镜解决IE6的PNG透明问题,滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片。注意:此方法在部分版本的IETest中无效,建议使用标准的IE6来进行测试!
目录说明:
思路:
1、书写正常的CSS代码,通过background导入图片,这样所有的浏览器均使用了此PNG图片;
background:url(../images/W3CfunsLogo.png);
2、通过滤镜对引入图片,滤镜引入图片的时候是相对于HTML文件,而不是相对于CSS文件,语法如下:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");
代码写到这里,我们放到IE6下测试后发现IE6还是没有透明,因为我们虽然设置了滤镜引入图片,但是background也同样加载了此图片,又因为background的图层比滤镜设置的高,所以才没有显示出来,如下图:
3、所以我们得出的结论就是当我们使用filter的时候,就要使background失效,因此我们可以使用CSSHack来解决此问题(如果您不知道IE6的CSSHack如何使用的话,请看这里!),只需要将IE6的background:none;即可,那么可以得出的代码如下:
_background:none; /*此代码只有IE6识别*/
又因为filter只在IE6下让其产生作用,IE6+版本的浏览器虽然也识别filter,但是png透明是没有灰底问题的,所以我们同样将filter也加上IE6 Hack即可。
4、最终我们可以得到如下代码:
#pics
{
background:url(../images/W3CfunsLogo.png) no-repeat;
/*以下为IE6设置PNG透明代码*/
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");
}
提示:如果需要使其支持链接的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、当没有平铺需求时候可考虑;
相关推荐
IE6不兼容png透明背景解决方法,有效解决IE6下 透明图片浅灰背景的问题
IE6支持PNG透明图片方法IE6支持PNG透明图片方法IE6支持PNG透明图片方法IE6支持PNG透明图片方法IE6支持PNG透明图片方法
让 IE6 支持 PNG 透明 让 IE6 支持 PNG 透明
js_IE6支持png透明解决png_ie6下不透明背景图片
关于ie6png图片透明的解决方法,只需要调用这三个文件即可
今天解决png图片在IE6下的背景...--[if lt IE 7]>是为了让IE6以下浏览器执行,其他浏览器不执行,因为IE6以上浏览器都支持png背景透明。 然后在images目录下放置如下三个文件: 点击此处下载ie6 png 透明的解决方法
IE6下PNG背景透明的方法IE6下PNG背景透明的方法IE6下PNG背景透明的方法IE6下PNG背景透明的方法IE6下PNG背景透明的方法
IE6支持PNG
PNG图片IE6下面解决最好的方法
ie6 png 透明度 解决方法 通过js调用,完美实现ie6透明度的兼容问题
完美解决IE6下png背景、图片透明问题
ie6图片png完美支持iepngfix
ie6中png透明解决方案 js 物有所值,解压,直接点开看png.html
关于ie6png图片透明的解决方法,只需要调用这三个文件即可
解决ie6下png透明问题 在页面引入这个js文件,让回EvPNG.fix();
--[if IE 6]> [removed][removed] [removed]<! <! /* EXAMPLE */ DD_belatedPNG.fix('.png_bg'); /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/ // --> 3.有2种调用函数,一种是DD_...
DD_belatedPNG完美地解决了“iepngfix.htc”会出现的无法平铺,没法定位以及所加超链接的点击区域无法使用等问题!
完美解决ie6下png不兼容问题,无论是作为背景还是插入图片
能解决png图片在IE6浏览器不兼容问题。同时能解决png背景图片在IE6浏览器不兼容的问题。简单易懂。急需要导入一个js文件,然后写入需要兼容的标签即可。
DD_belatedPNG.js IE6支持png图片透明度的文件使用方法: DD_belatedPNG.fix("标签ID,标签Class,标签名");