IE6 PNG透明終極解決方案


方案1 - 濾鏡解決方案:

介紹:濾鏡從IE4.0被微軟正式引入,所以我們可以使用濾鏡解決IE6的PNG透明問題,濾鏡不僅可以實現目前CSS3的一些旋轉效果而且還可以引入圖片。注意:此方法在部分版本的IETest中無效,建議使用標准的IE6來進行測試!

目錄說明:

menu.png

思路:

        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的圖層比濾鏡設置的高,所以才沒有顯示出來,如下圖:

background&filter.png

        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、當沒有平鋪需求時候可考慮;

濾鏡解決方案 - DEMO入口

 

 

方案2 - HTC插件解決方案:

介紹:從IE 5.5版本開始,Internet Explorer(IE)開始支持Web 行為的概念。這些行為是由后綴名為.htc的腳本文件描述的,它們定義了一套方法和屬性,程序員幾乎可以把這些方法和屬性應用到HTML頁面上的任何元素上去。

目錄說明:

htc.png

思路:

        1、首先下載壓縮文件 htc.zip (2.27 KB, 下載次數: 114)

        2、復制並粘貼iepngfix.htc和blank.gif到您的網站文件夾中。

        3、在需要使用的PNG標簽上定義如下,相對於HTML文件的位置 (不相對於CSS文件!)。例如,你可能看起來像這樣:

img,div{behavior:url(style/iepngfix.htc);}

 

        5、如果您的網站使用的子文件夾,打開。HTC文件,大約在第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 Sprite需求時可考慮;

        3、PNG圖片比較頻繁修改時可考慮;

htc解決方案 - DEMO入口

 

 

方案3 - 純CSS解決方案:

介紹:雖說是純CSS解決方案,但是也使用了JavaScript來運算,只不過是將腳本寫到了CSS文件中,遺憾的是,此方案只支持img標簽,對背景圖片無效。

目錄說明:

menu.png

思路:

        1、首先下載透明的圖片文件 blank.zip (707 Bytes, 下載次數: 110)

        2、在需要設置透明的樣式中加入下方代碼,其中藍色標注代碼為剛才下載的透明圖片,路徑同樣還是相對於HTML文件的位置 (不相對於CSS文件!):

img
{ _azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" 
&amp;&amp; 
this.src.toLowerCase().indexOf('.png')&gt;-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標簽,對背景圖片無效。

目錄說明:

menu.png

思路:

        1、首先下載透明此方案所用到的js文件 iepngfix.zip (1.25 KB, 下載次數: 148)

        2、由於此js只有使用IE6時才有用,所以為了讓我們的頁面更加高效的執行,我們可以將上方代碼修改如下,只有IE6的時候才調用執行此JavaScript:

&lt;!--[if IE 6]&gt;&lt;script type="text/javascript" 
src="js/iepngfix.js"&gt;&lt;/script&gt;&lt;![endif]--&gt; 

優點:

        代碼看起來似乎很優雅,基本沒有外加的文件,效率還算不錯。

缺點:

        1、額外加入了js文件,增加http請求;

        2、不支持背景圖即Background;

        3、當文件載入之前,會先暫時呈現灰底;

        4、不支持Hover等偽類;

使用情況:

        1、大部分透明的png存在於img標簽中時可考慮;

        2、如果有背景圖的可以參考上面所說的支持背景圖的兩種方式;

原生JavaScript解決方案 - DEMO入口

 

方案5 - jQuery解決方案:

介紹:jQuery為我們帶來了很大的方便,jQuery沒有讓我們有太大的失望,img和png都同時得以支持,唯一美中不足的還是無法平鋪,無法使用CSS Sprite。

目錄說明:

menu.png

思路:

        1、首先下載此方案所用到的js文件和透明gif jQueryPngFix.zip (2.7 KB, 下載次數: 155)

        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位以上的 alpha 透明度。而對於非動畫的GIF建議你使用PNG8,因為體積會更小~

思路:一個最簡單也最保險的方法讓IE6支持PNG圖片透明(小小的分享一下)

優缺點:點擊此處前往

方案7 - DD_belatedPNG解決方案:

介紹:我們都知道在目前所用的png圖片透明解決方案基本都是使用濾鏡、xpression解決的、透明gif替代。但是這些方法都有一個缺點,就是不支持CSS中backgrond-position與 background-repeat。而這次的js插件使用了微軟的VML語言進行繪制且不需要引入其他文件,一個小小的js就可以完美解決png圖片 bug就連img標簽和hover偽類也可以很好的解決。

目錄說明:

menu.png

思路:

        1、首先下載此方案所用到的文件, DD_belatedPNG.zip (3.76 KB, 下載次數: 270)

        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解決方案:

介紹:此方案與第七種方案差不多,使用方法也如出一轍,效果也非常不錯。

目錄說明:

menu.png

思路:

        1、首先下載此方案所用到的文件, EvPng.zip (3.39 KB, 下載次數: 142)

        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 Sprite技術的hover效果在部分情況下top可能會有1像素的偏差。

使用情況:

        1、當前7種方法均不能解決問題的時候可考慮;

        2、當DD_belatedPNG效果不理想的時候可以考慮;

EvPng解決方案 - DEMO入口

 

 

原文轉載http://www.w3cfuns.com/thread-297-1-1.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM