IE6兼容透明背景图片及解决方案

DD_belatedPNG.fix(".pngFix,.pngFix:hover");

css代码:

【转发】IE6 PNG透明终极实施方案(打造W3Cfuns-IE6PNG最强帖),pngw3cfuns-ie6png

原来的文章地址:

正文版权归W3Cfuns.com全部,转发需在作品页面明显地方以链接的方法交给最先的作品链接,不然W3Cfuns.com将基于《中国写作权法》向香江市人民法院提交相关资料,根究侵犯版权力和权利任。

      
“爱戴生命,远远地离开IE6”,IE6中的bug令超级多Web前端开荒人士实为脑仁疼,因而不了然烧了不怎么脑部细胞,在无数的Bug中最令人抓狂的就是IE对png图片的不协理,以致设计员和重构师放弃了累累很炫的效用,为了让大家在此上头少烧点头脑细胞,KwooShung作者就舍身一把,把近些日子最流行最实用的IE6匡助PNG图片的方案整理到本贴内,以供大家学习参照他事他说加以考查!


方案1 – 滤镜技术方案:

介绍:滤镜从IE4.0被微软标准引进,所以我们得以采取滤镜撤除IE6的PNG透明难点,滤镜不仅可以够兑现近些日子CSS3的一部分筋斗效果还要还能引进图片。注意:此措施在有个别版本的IETest中没用,建议接纳正式的IE6来开展测验!

目录表达:
<ignore_js_op>

图片 1

思路:
    
   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的图层比滤镜设置的高,所以才未有出示出来,如下图:

<ignore_js_op>
图片 2

    
   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 Coca Cola供给时可思忖;
        3、当未有平铺供给时候可考虑;

滤镜建设方案 – DEMO入口


方案2 – One plus插件技术方案:

介绍:从IE 5.5本子初步,Internet Explorer(IE)开首支持Web
行为的定义。那么些作为是由后缀名称为.htc的台本文件叙述的,它们定义了一套方法和总体性,技术员大致可以把那些情势和性质应用到HTML页面上的其余因素上去。

目录表达:
<ignore_js_op>

图片 3

思路:
    
   1、首先下载压缩文件 <ignore_js_op>图片 4 htc.zip (2.27 KB, 下载次数:
2851State of Qatar 
        2、复制并粘贴iepngfix.htc和blank.gif到你的网址文件夹中。
        3、在须求选拔的PNG标签上定义如下,相对于HTML文件之处(不对立于CSS文件!)。比如,你或然看起来像这么:
              <style type=”text/css”>
                      img,div{behavior:url(style/iepngfix.htc);}
              </style>

    
   5、要是您的网址使用的子文件夹,展开。一加文件,差没有多少在第16行纠正blankImg变量,改进blank.gif路线像这么:相近路线绝对于HTML文件的岗位
(不周旋于CSS文件!)。
             IEPNGFix.blankImg = “images/blank.gif”;

        6、复制并粘贴iepngfix.htc和blank.gif到您的网址文件夹中。
        <script type=”text/javascript”
src=”js/iepngfix_tilebg.js”></script>

    
   7、由于此js唯有应用IE6时才有用,所感觉了让大家的页面尤其便捷的推行,大家得以将上边代码修改如下,独有IE6的时候才调用执行此JavaScript:
        <!–[if IE 6]><script type=”text/javascript”
src=”../js/iepngfix_tilebg.js”></script><![endif]–>

优点:
    
   1、一回性布置好,只须要像平时一律引进png图片,也不需求寻思png相对于html路线的标题,当目录有所变动,只须要纠正htc文件或css中htc文件路径就能够。
        2、扶持平铺属性。
        3、不支持Img标签;
        4、不支持Hover等伪类;

缺点:
        1、多引进了js、图片和htc,共多个文本;
        2、不支持CSS Sprite;
        3、当文件载入在此之前,会先临时展现灰底;

选择景况:
        1、当未有img引进png时可构思;
        2、当未有CSS 七喜要求时可思忖;
        3、PNG图片相比较频繁改善时可思谋;

htc设计方案 – DEMO入口


方案3 – 纯CSS解决方案:

介绍:虽说是纯CSS施工方案,然而也采取了JavaScript来运算,只但是是将脚本写到了CSS文件中,可惜的是,此方案只帮助img标签,对背景图片无效。

目录表达:
<ignore_js_op>

图片 5

思路:
    
   1、首先下载透明的图样文件 <ignore_js_op>图片 6 blank.zip (707 Bytes, 下载次数:
一九二四State of Qatar 
    
   2、在急需设置透明的样式中加入下方代码,其黑粉绿色标明代码为刚刚下载的晶莹图片,路线相仿照旧相持于HTML文件的职位
(不对峙于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 = “images/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);
              }

优点:
    
   CSS代码看起来就像是极高贵,起码未有横三竖四的文书了,基本未有增大的文本,功能还算不错。

缺点:
        1、多引进了一个本不该留存的blank.gif图片文件;
        2、不接济背景图即Background;
        3、当文件载入早先,会先暂且展现灰底;
        4、不支持Hover等伪类;

选取状态:
        1、超越五成透明的png存在于img标签中时可思谋;
        2、假诺有背景图的能够参照下边所说的支撑背景图的三种格局;

纯css应用方案 – DEMO入口


方案4 – 原生JavaScript技术方案:

介绍:利用了方案1的滤镜原理来贯彻,但出于此javascript未有读取css文件中的样式,所以此方案雷同只帮衬img标签,对背景图片无效。

目录表明:
<ignore_js_op>

图片 7

思路:
    
   1、首先下载透明此方案所用到的js文件 <ignore_js_op>图片 8 iepngfix.zip (1.25 KB, 下载次数:
2810卡塔尔(قطر‎ 
    
   2、由于此js唯有采用IE6时才有用,所感到了让大家的页面越发便捷的施行,大家能够将上边代码更正如下,唯有IE6的时候才调用实行此JavaScript:
        <!–[if IE 6]><script type=”text/javascript”
src=”js/iepngfix.js”></script><![endif]–>

优点:
        代码看起来就好像很温婉,基本未有增大的文件,功能还算不错。

缺点:
        1、额外到场了js文件,扩大http伏乞;
        2、不帮忙背景图即Background;
        3、当文件载入在此以前,会先目前展现灰底;
        4、不支持Hover等伪类;

使用情状:
        1、超过1/4晶莹剔透的png存在于img标签中时可思量;
        2、假设有背景图的能够参谋下面所说的支撑背景图的三种方法;

原生JavaScript技术方案 – DEMO入口


方案5 – jQuery应用方案:

介绍:jQuery为大家带给了非常的大的方便,jQuery未有让大家有太大的大失所望,img和png都同期能够扶植,独一美中相差的依旧力所不如平铺,不恐怕使用CSS
7-Up。

目录表明:
<ignore_js_op>

图片 9

思路:
    
   1、首先下载此方案所用到的js文件和透亮gif <ignore_js_op>图片 10 jQueryPngFix.zip (2.7 KB, 下载次数:
3697卡塔尔(قطر‎ 
        2、找到js文件中找到blankgif:
‘images/blank.gif’,将路线改革为绝对于HTML文件的任务(不对立于CSS或js文件!)
    
   3、由于此js独有采纳IE6时才有用,所认为了让大家的页面特别便捷的进行,我们可以将下面代码改善如下,独有IE6的时候才调用试行此JavaScript:
        <!–[if IE 6]><script type=”text/javascript”
src=”js/pngfix.js”></script><![endif]–>

优点:
    
   1、CSS代码看起来超级高雅,只要求引进js举办轻巧的配备一下就能够了,作用还算不错;
        2、帮助背景图,协理img;

缺点:
        1、额外参与了js文件和图表文件,扩大http诉求;
        2、加载了叁个庞大的jQuery类库;
        3、多库共存的时候只怕会情不自禁难点;
        4、不协助平铺;
        5、不支持CSS Sprite;
        6、当文件载入此前,会先暂时展现灰底;
        7、不支持Hover等伪类;

行使状态:
        当你的花色中使用jQuery的时方可考虑;

jQuery解决方案 – DEMO入口


方案6 – PNG8格式的图样解决方案:

介绍:png8和gif都以8位的反射率,IE6与生俱来就援救png8的索引色光滑度,但不接济png或8位以上的
阿尔法 发光度。而对于非动漫的GIF建议您采纳PNG8,因为容量会更加小~

思路:三个最简便易行也最保证的方法让IE6支持PNG图片透明(小小的分享一下)

利弊:点击这里前往


方案7 – DD_belatedPNG建设方案:

介绍:大家都清楚在这时候此刻所用的png图片透明建设方案基本都是行使滤镜、xpression毁灭的、透明gif取代。可是那一个格局都有叁个缺点,便是不扶助CSS中backgrond-position与background-repeat。而这一次的js插件使用了微软的VML语言进行绘图且不须要引进其余文件,一个小小的js就能够完备化解png图片bug就连img标签和hover伪类也足以很好的缓慢解决。

目录表达:
<ignore_js_op>

图片 11

思路:
    
   1、首先下载此方案所用到的文件, <ignore_js_op>图片 12 DD_belatedPNG.zip (3.76 KB,
下载次数: 4610卡塔尔 
    
   2、引进刚下载的js文件,同样是因为此js独有接纳IE6时才有用,所认为了让大家的页面越来越高效的实行,大家能够将上面代码改善如下,唯有IE6的时候才调用施行此JavaScript:
        <!–[if IE 6]><script type=”text/javascript”
src=”js/DD_belatedPNG.js”></script><![endif]–>
        3、调用函数,设置参数如下:
              DD_belatedPNG.fix(“#pngImg,#pics,#picsRepeat”);

          
   个中传入的参数为所采纳png图片的竹签的ID、类样式和标具名称,相同也可以遵照下方那样来写
              DD_belatedPNG.fix(“#content img”);
              此方法规意味着#content下的具备img标签透明

          
   要是为链接和链接的hover设置透明,那么你遵照下方这么来写,在局地版本里面可以绝不插足:hover直接写选拔器就能够,可是为了保险,提议大家照旧增多:hover:
              DD_belatedPNG.fix(“#links,#link:hover”);

          
   写到这里还要您使用过jQuery只怕CSSQuery类库,那么你分明熟习上边的这种选用情势,一言以蔽之正是,在CSS中您是何许抉择的成分,那么在这里个js函数(方法)中传唱什么,只可是多个挑选的时候,使用逗号隔断就能够。

    
   KwooShung用此措施时的小技巧:假若页面中存在重重png,DD_belatedPNG.fix(State of Qatar;函数的参数岂不是不长?大家得以选择这种写法:
             DD_belatedPNG.fix(“.pngFix,.pngFix:hover”);

            
假如使用上述的写法,我们的html中只必要在绝对应的价签上参预class=”pngFix”就能够了,假设有三个类样式,遵照平日的多少个类样式的写法就能够class=”abc
cbc pngFix”,

            
使用此办法的时候,我们每一回都要加载七个js文件或然写四个<script>标签才行,那样不太好,http央浼会大增,那么我们能够张开DD_belatedPNG.js文件,在尾巴部分参加如下代码就能够:
             window.onload = function()
             {
                          DD_belatedPNG.fix(“.pngFix,.pngFix:hover”);
             }

            
那样我们只须求引入此JS,在供给透明的竹签上参与class=”pngFix”即可,简单 ·
方便 · 火速!

优点:
        1、CSS代码无需任何改变,根据平日的思绪来写就可以;
        2、无需配置;
        3、未有剩余的gif图片;
        4、支持img;
        5、扶植平铺;
        6、支持CSS Sprite;
        8、支持Hover等伪类;

缺点:
        1、额外插足了js文件(6.39k)和http乞请,能够忽视不计;
        2、当文件载入从前,会先暂且显示灰底;
    
   3、js文件过多的时候,大概会报错,招致js不能平常运作(这种情景极少现身,能够忽视不计);

选用状态:
        1、当前6种艺术均不可能缓和问题的时候可思虑;
    
   2、当png图片过多的时候可考虑,因为png图片太多,使用前面包车型大巴多少个措施,有的会引致CSS代码冗余过多,还不及引进此文件划算;

DD_belatedPNG应用方案 – DEMO入口


方案8 – EvPng实施方案:

介绍:此方案与第四种方案差不离,使用办法也完全一样,效果也相当科学。

目录表明:
<ignore_js_op>

图片 13

思路:
    
   1、首先下载此方案所用到的文书, <ignore_js_op>图片 14 EvPng.zip (3.39 KB, 下载次数:
2843卡塔尔(قطر‎ 
        2、仿效第各个方案的选用办法。

优点:
        1、CSS代码无需任何改动,依据日常的笔触来写就可以;
        2、不需求配置;
        3、未有剩余的gif图片;
        4、支持img;
        5、协理平铺;
        6、支持CSS Sprite;
        8、支持Hover等伪类;

缺点:
    
   1、额外到场了js文件(文件4.93k,比DD_belatedPNG的6.39k还小)和http须要,能够忽视不计;
        2、当文件载入以前,会先权且展现灰底;
    
   3、js文件过多的时候,大概会报错,引致js不能平常运作(这种景况极少现身,能够忽略不计);
        4、使用CSS
Pepsi-Cola本领的hover效果在有些情景下top大概会有1像素的谬误。

使用情状:
        1、当前7种格局均无法缓和难题的时候可思忖;
        2、当DD_belatedPNG效果不佳好的时候能够思索;

方案提供者:本帖60楼,多谢moxuanyuan童鞋的共享。

EvPng建设方案 – DEMO入口

PNG透明终极实施方案(营造W3Cfuns-IE6PNG最强帖),pngw3cfuns-ie6png
原著地址:
本文版权归W3Cfuns….

 window.onload= function() { DD_belatedPNG.fix(".pngFix,.pngFix:hover"); }

首先给大家来得效果图:

2、不支持Img标签;

写到这里还要您使用过jQuery只怕CSSQuery类库,那么您一定熟识下面的这种接纳格局,说来讲去正是,在CSS中您是哪些接受的要素,那么在此个js函数中传出什么,只可是多少个筛选的时候,使用逗号隔绝就能够。

3、js文件过多的时候,或然会报错,招致js无法不奇怪运作;

html代码:

运用情况:

一部分图片存在着浏览器的包容性,自身是晶莹剔透的图形在ie6中却是不透明,举例:

一、使用滤镜 代码:

.contain { width: 1000px; height: 300px; margin: 0 auto; background: #fff; }.contain .con { width: 400px; float: left; }.contain h1 { font-size: 18px; color: #333; margin-bottom: 10px; }.contain h2 { font-size: 16px; color: #333; }.imgpng { width: 200px; height: 150px; background: url; }

3、网速慢的时候,不汇合世先灰底再透明的景色,帮衬远程图片;

JS代码:

1、当未有img引入png时可寻思;

3、不支持CSS Sprite;

//2、直接用选取器:类名,ID,标签

IE6PNG透明解决方案

1、额外参加了js文件和http央求,能够忽略不计;

三、DD_belatedPNG.js文件

常规显示的职能

页面中插入一段js就可以。原理同上,只是将img标签用竹签替换掉,何况经过滤镜设置该标签的background。它会将具有插入的PNG都这么管理。

css代码:

1、当没有img引进png时可盘算;

3、当未有平铺必要时候可考虑;

唤醒:借使供给使其援救链接的hover,那么必要在CSS中定义:cursor:pointer;使其表现手型,不然将为私下认可的鼠标状态。

写到这里还要您使用过jQuery大概CSSQuery类库,那么你肯定了然上边包车型地铁这种选用情势,同理可得便是,在CSS中你是何等筛选的因素,那么在这里个js函数中流传什么,只可是四个选项的时候,使用逗号隔断就能够。

复制代码 代码如下:DD_belatedPNG.fix;

!--[if IE 6]script src="~/Scripts/UI/DD_belatedPNG.js"/scriptscript$(function () {

1、不帮助平铺,即使filter有sizingMethod=”scale”,
拉伸缩放方式,可是图片会变形,若是单单的水彩或简捷的渐变色还是能横向平铺;

复制代码
代码如下:DD_belatedPNG.fix(“#pngImg,#pics,#picsRepeat”);

第一给我们体现效果图:

复制代码
代码如下:DD_belatedPNG.fix(“.pngFix,.pngFix:hover”);

!–[ifIE
6]scripttype=”text/javascript”src=”js/DD_belatedPNG.js”/script![endif]–

3、当未有平铺供给时候可思忖;

1、引进js文件,相似是因为此js独有接纳IE6时才有用,所以为了让大家的页面越来越高效的实践,大家能够将下边代码修改如下,独有IE6的时候才调用推行此JavaScript:

4、辅助Hover等伪类,不过得利用两张图纸,网速慢的情事下,会促成第二张图片权且不恐怕突显,因为还从未完全载入;

2、调用函数,设置参数如下:

1、引进js文件,相像由于此js唯有应用IE6时才有用,所感到了让大家的页面越发急忙的实行,大家得以将上面代码修改如下,唯有IE6的时候才调用推行此JavaScript:

1、CSS代码没有必要任何纠正,依据经常的笔触来写就能够;

一、使用滤镜 代码:

二、利用JS废除html中的img(插入在网页中的png图像State of Qatarpng背景灰难点

3、网速慢的时候,不会并发先灰底再透明的事态,接济远程图片;

2、当文件载入在此之前,会先权且显示灰底;

2、当没有CSS Pepsi-Cola须求时可思忖;

!--[if IE 6]script type="text/javascript"function correctPNG(){for(var i=0; idocument.images.length; i++){var img = document.images[i]var imgName = img.src.toUpperCase()if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){var imgID = (img.id)  "id='" + img.id + "' " : ""var imgClass = (img.className)  "class='" + img.className + "' " : ""var imgTitle = (img.title)  "title='" + img.title + "' " : "title='" + img.alt + "' "var imgStyle = "display:inline-block;" + img.style.cssTextif (img.align == "left") imgStyle = "float:left;" + imgStyleif (img.align == "right") imgStyle = "float:right;" + imgStyleif (img.parentElement.href) imgStyle = "cursor:hand;" + imgStylevar strNewHTML = "span "+ imgID + imgClass + imgTitle + " style=/"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');/"/span"img.outerHTML = strNewHTMLi = i-1}}}correctPNG();/script![endif]--

二、利用JS解决html中的imgpng背景灰难题

复制代码
代码如下:DD_belatedPNG.fix(“.pngFix,.pngFix:hover”);

优点

4、支持img;

里面传入的参数为所利用png图片的价签的ID、类样式和标签字称,同样也足以遵从下方那样来写

复制代码
代码如下:DD_belatedPNG.fix(“#pngImg,#pics,#picsRepeat”);

2、效率高,速度快;

4、帮忙Hover等伪类,可是得利用两张图纸,网速慢的图景下,会引致第二张图片临时不能够呈现,因为还一直不完全载入;

假定接收上述的写法,大家的html中只需求在相呼应的竹签上参预就能够了,要是有多个类样式,根据平日的多少个类样式的写法即可,

6、支持CSS Sprite;

ie6中的透明图片不是晶莹展现的消除方案

div h1DD_belatedPNG实现IE6下的透明背景/h1div h21、通过公共类pngFix/h2pwindow.onload = function () {DD_belatedPNG.fix(".pngFix,.pngFix:hover");}/pimg src="../../Content/IMG/IE6.png" alt="图片 15" /div /div/divdiv h22、直接用选择器:类名,ID,标签实现/h2pDD_belatedPNG.fix(".imgpng,img");/pimg src="../../Content/IMG/IE6.png" alt="图片 16" /div /div/div/div

1、不帮衬平铺,纵然filter有sizingMethod=”scale”,
拉伸缩放方式,不过图片会变形,假诺只有的颜料或简捷的渐变色还可以够横向平铺;

复制代码
代码如下:DD_belatedPNG.fix(“#contentimg”);

要是为链接和链接的hover设置透明,那么您遵照下方这么来写,在部分版本里面能够绝不参加:hover直接写选择器就能够,可是为了确定保障,提出大家依然加上:hover:

假如应用上述的写法,我们的html中只须求在相呼应的竹签上插足就可以了,假若有三个类样式,遵照平日的两个类样式的写法就能够,

行使情状:

3、不支持CSS Sprite;

 #pics { background:urlno-repeat; /*以下为IE6设置PNG透明代码*/ _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/Logo.png"); }

假设为链接和链接的hover设置透明,那么您遵照下方这么来写,在部分版本里面能够毫不参加:hover直接写选用器就能够,不过为了确认保证,提议我们依然增加:hover:

使用此方法的时候,我们每便都要加载五个js文件恐怕写五个

3、未有剩余的gif图片;

缺点:

IE6PNG透明解决方案

小能力:若是页面中存在超多png,DD_belatedPNG.fix(State of Qatar;函数的参数岂不是相当短?大家得以行使这种写法:

JS代码:

针对以上情状只必要在代码中最后加上上面这一段代码就可以消除了

三、DD_belatedPNG.js文件

DD_belatedPNG实现IE6下的透明背景1、通过公共类pngFixwindow.onload = function () {DD_belatedPNG.fix(".pngFix,.pngFix:hover");}2、直接用选择器:类名,ID,标签实现DD_belatedPNG.fix;

1、灰白无插件;

2、调用函数,设置参数如下:

即可:

此措施则象征#content下的享有img标签透明

复制代码
代码如下:DD_belatedPNG.fix(“#links,#link:hover”);

2、不支持Img标签;

//1、通过公共类

复制代码 代码如下:DD_belatedPNG.fix;

那样我们只须求引进此JS,在急需透明的竹签上进入就可以,简单 ・ 方便 ・
急速!

此办法则象征#content下的持有img标签透明

页面中插入一段js就可以。原理同上,只是将img标签用span标签替换掉,并且通过滤镜设置该span标签的background。它会将装有插入的PNG都如此管理。

2、无需配置;

!--[if IE 6] scriptfunction correctPNG() {for(var i=0; idocument.images.length; i++){var img = document.images[i];var imgName = img.src.toUpperCase();if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){var imgID = (img.id)  "id='" + img.id + "' " :"";var imgClass = (img.className)  "class='" + img.className + "'" : "";var imgTitle = (img.title)  "title='" + img.title + "' " :"title='" + img.alt + "' ";var imgStyle = "display:inline-block;" + img.style.cssText;if (img.align == "left") imgStyle = "float:left;" +imgStyle;if (img.align == "right") imgStyle = "float:right;" +imgStyle;if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;var strNewHTML = "span "+ imgID + imgClass + imgTitle +"style=/"" + "width:" + img.width + "px;height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" +"(src='" + img.src + "',sizingMethod='scale');/"/span";img.outerHTML = strNewHTML;i = i-1;}}}window.attachEvent("onload", correctPNG);/script![endif]-- 

针对以上处境只须求在代码中最终加上下边这一段代码就足以消除了

提示:假如急需使其帮忙链接的hover,那么须要在CSS中定义:cursor:pointer;使其变现手型,不然将为私下认可的鼠标状态。

2、当没有CSS 7-Up必要时可思忖;

优点:

缺点:

7、支持Hover等伪类;

缺点:

在ie6中的效果

 #pics { background:url(../images/Logo.png)no-repeat; /*以下为IE6设置PNG透明代码*/ _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/Logo.png"); }
DD_belatedPNG.fix(".imgpng,img");});/script![endif]--

以上正是本文陈说IE6包容透明背景图片及缓慢解决方案的全部内容,希望对大家享有利于。

html代码:

中间传入的参数为所接纳png图片的标签的ID、类样式和标签字称,同样也得以遵从下方那样来写

小手艺:借使页面中设有不菲png,DD_belatedPNG.fix(State of Qatar;函数的参数岂不是非常长?大家得以接收这种写法:

5、扶植平铺;

有的图纸存在着浏览器的包容性,本人是透明的图样在ie6中却是不透明,比方:

ie6中的透明图片不是晶莹显示的消除方案

2、效率高,速度快;

style.contain { width: 1000px; height: 300px; margin: 0 auto; background: #fff; }.contain .con { width: 400px; float: left; }.contain h1 { font-size: 18px; color: #333; margin-bottom: 10px; }.contain h2 { font-size: 16px; color: #333; }.imgpng { width: 200px; height: 150px; background: url(/Content/IMG/Ie6.png); }/style

优点

运用此办法的时候,大家每一遍都要加载八个js文件或许写多少个script标签才行,那样不太好,http央浼会大增,那么大家得以张开DD_belatedPNG.js文件,在后面部分插手如下代码

发表评论

电子邮件地址不会被公开。 必填项已用*标注