IE6兼容透明背景图片及解决方案_javascript技巧_脚本之家

率先给大家体现效果图:

首先给大家显示效果图:

【转发】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 七喜须求时可思谋;
        3、当没有平铺需要时候可思量;

滤镜解决方案 – DEMO入口


方案2 – 摩Toro拉插件实施方案:

介绍:从IE 5.5本子早先,Internet Explorer(IE)初阶帮助Web
行为的定义。那一个行为是由后缀名叫.htc的本子文件陈诉的,它们定义了一套方法和品质,程序猿大概能够把这么些主意和总体性应用到HTML页面上的此外因素上去。

目录表达:
<ignore_js_op>

图片 3

思路:
    
   1、首先下载压缩文件 <ignore_js_op>图片 4 htc.zip (2.27 KB, 下载次数:
2851卡塔尔 
        2、复制并粘贴iepngfix.htc和blank.gif到您的网址文件夹中。
        3、在供给使用的PNG标签上定义如下,相对于HTML文件的职位
(不周旋于CSS文件!)。举个例子,你大概看起来像这么:
              <style type=”text/css”>
                      img,div{behavior:url(style/iepngfix.htc);}
              </style>

    
   5、借使您的网址采用的子文件夹,张开。BlackBerry文件,差不离在第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 Coca Cola须求时可考虑;
        3、PNG图片相比频仍改革时可思虑;

htc应用方案 – DEMO入口


方案3 – 纯CSS建设方案:

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

目录表达:
<ignore_js_op>

图片 5

思路:
    
   1、首先下载透明的图片文件 <ignore_js_op>图片 6 blank.zip (707 Bytes, 下载次数:
1924卡塔尔国 
    
   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、大多数透明的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, 下载次数:
3697State of Qatar 
        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(卡塔尔;函数的参数岂不是相当短?大家能够运用这种写法:
             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
Coca Cola技巧的hover效果在有些意况下top大概会有1像素的过错。

选用状态:
        1、当前7种艺术均不可能缓和难题的时候可思虑;
        2、当DD_belatedPNG效果不优异的时候可以思考;

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

EvPng建设方案 – DEMO入口

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

JS代码:

JS代码:

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

html代码:

//1、通过公共类

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

css代码:

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

.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; }
DD_belatedPNG.fix(".imgpng,img");});/script![endif]--

ie6中的透明图片不是晶莹剔透突显的实施方案

html代码:

局地图形存在着浏览器的包容性,本人是晶莹的图纸在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

本着上述气象只必要在代码中最终加上上边这一段代码就足以缓和了

css代码:

IE6PNG透明解决方案

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

一、使用滤镜 代码:

ie6中的透明图片不是晶莹剔透显示的缓和方案

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

有的图形存在着浏览器的宽容性,自个儿是晶莹的图纸在ie6中却是不透明,举个例子:

唤醒:如若必要使其帮衬链接的hover,那么供给在CSS中定义:cursor:pointer;使其表现手型,不然将为暗中同意的鼠标状态。

在ie6中的效果

优点

正规彰显的作用

2、效率高,速度快;

本着以上意况只供给在代码中最后加上上边这一段代码就能够减轻了

3、网速慢的时候,不会不能自已先灰底再透明的情状,帮助远程图片;

!--[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]--

4、帮衬Hover等伪类,可是得使用两张图片,网速慢的图景下,会导致第二张图片暂且不能够出示,因为还从未完全载入;

IE6PNG透明施工方案

缺点:

一、使用滤镜 代码:

1、不扶植平铺,就算filter有sizingMethod=”scale”,
拉伸缩放方式,不过图片会变形,假使单单的颜色或简捷的渐变色还是能够横向平铺;

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

2、不支持Img标签;

升迁:要是须求使其扶植链接的hover,那么须求在CSS中定义:cursor:pointer;使其显示手型,不然将为默许的鼠标状态。

3、不支持CSS Sprite;

优点

运用意况:

1、冰雪蓝无插件;

1、当未有img引进png时可构思;

2、效率高,速度快;

2、当未有CSS Coca Cola须求时可考虑;

3、网速慢的时候,不会产出先灰底再透明的景色,协助远程图片;

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

4、协理Hover等伪类,可是得利用两张图纸,网速慢的情景下,会引致第二张图纸临时不可能出示,因为还尚无完全载入;

二、利用JS消除html中的imgpng背景灰难点

缺点:

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

1、不协助平铺,尽管filter有sizingMethod=”scale”,
拉伸缩放方式,可是图片会变形,若是唯有的颜色或简捷的渐变色仍然是能够横向平铺;

2、不支持Img标签;

三、DD_belatedPNG.js文件

3、不支持CSS Sprite;

1、引进js文件,同样是因为此js唯有采用IE6时才有用,所认为了让我们的页面尤其便捷的奉行,我们得以将上面代码修改如下,唯有IE6的时候才调用奉行此JavaScript:

选取状态:

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

1、当未有img引进png时可思索;

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

2、当未有CSS Sprite需要时可思忖;

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

3、当未有平铺需要时候可盘算;

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

二、利用JS歼灭html中的img(插入在网页中的png图像卡塔尔(قطر‎png背景灰难点

此方准绳象征#content下的持有img标签透明

页面中插入一段js即可。原理同上,只是将img标签用span标签替换掉,况且经过滤镜设置该span标签的background。它会将有所插入的PNG都那样管理。

若果为链接和链接的hover设置透明,那么你根据下方这么来写,在一些版本里面能够毫无参预:hover直接写采纳器就可以,可是为了有限扶植,提议大家还是加上:hover:

!--[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]-- 

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

三、DD_belatedPNG.js文件

写到这里还要您使用过jQuery或然CSSQuery类库,那么您一定熟识上边包车型客车这种选择格局,简来说之正是,在CSS中您是怎样挑选的因素,那么在此个js函数中传来什么,只可是几个选项的时候,使用逗号隔绝就可以。

1、引进js文件,相符出于此js唯有利用IE6时才有用,所以为了让我们的页面特别快速的实施,大家能够将上边代码改革如下,唯有IE6的时候才调用试行此JavaScript:

小手艺:要是页面中留存重重png,DD_belatedPNG.fix(卡塔尔国;函数的参数岂不是十分长?大家能够接收这种写法:

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

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

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

若果应用上述的写法,大家的html中只必要在相呼应的竹签上投入就能够了,假诺有多少个类样式,遵照平常的八个类样式的写法就能够,

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

运用此方法的时候,大家每一次都要加载多少个js文件大概写五个

内部传入的参数为所运用png图片的价签的ID、类样式和标签名称,雷同也足以信守下方那样来写

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

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

一经为链接和链接的hover设置透明,那么你依照下方这么来写,在一些版本里面可以毫不参加:hover直接写采取器就可以,然则为了保险,提议大家依旧加上:hover:

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

写到这里还要您使用过jQuery或然CSSQuery类库,那么你明确熟习下面的这种接纳方式,总体上看就是,在CSS中你是什么样抉择的因素,那么在此个js函数中传唱什么,只不过八个选用的时候,使用逗号隔绝就能够。

小技艺:假诺页面中留存好些个png,DD_belatedPNG.fix(卡塔尔;函数的参数岂不是不长?大家能够接纳这种写法:

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

假若运用上述的写法,大家的html中只必要在相对应的标签上参预就能够了,假设有四个类样式,遵照常常的四个类样式的写法就可以,

动用此格局的时候,大家每一遍都要加载三个js文件大概写七个script标签才行,那样不太好,http诉求会追加,那么大家能够打开DD_belatedPNG.js文件,在后面部分参与如下代码

即可:

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

那样我们只供给引进此JS,在急需透明的价签上投入就可以,轻便 ・ 方便 ・
快速!

优点:

1、CSS代码没有必要任何校订,依据日常的思绪来写就能够;

2、没有必要配置;

3、未有剩余的gif图片;

4、支持img;

5、帮忙平铺;

6、支持CSS Sprite;

7、支持Hover等伪类;

缺点:

1、额外到场了js文件和http伏乞,可以忽视不计;

2、当文件载入以前,会先一时突显灰底;

3、js文件过多的时候,恐怕会报错,引致js不恐怕符合规律运转;

上述就是本文陈诉IE6宽容透明背景图片及减轻方案的全体内容,希望对大家有所扶助。

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图