快捷導(dǎo)航

DD_belatedPNG,IE6下PNG透明解決方案(國外)

更新時間：2010年12月06日 19:25:39 作者：

今天介紹DD_belatedPNG,只需要一個理由,就是它支持backgrond-position與background-repeat.這是其他js插件不具備的.

我們知道IE6是不支持透明的PNG的,這無疑限制了網(wǎng)頁設(shè)計的發(fā)揮空間.
然而整個互聯(lián)網(wǎng)上解決這個IE6的透明PNG的方案也是多不勝數(shù),從使用IE特有的濾鏡或是expression,再到j(luò)avascript+透明GIF替代.但是這些方法都有一個缺點,就是不支持CSS中backgrond-position與background-repeat.

而我今天介紹DD_belatedPNG,只需要一個理由,就是它支持backgrond-position與background-repeat.這是其他js插件不具備的.同時DD_belatedPNG還支持a:hover屬性,以及<img>.

看Demo

原理
這個js插件使用了微軟的VML語言進(jìn)行繪制,而其他多數(shù)解決PNG問題的js插件用的是AlphaImageLoader濾鏡.

使用方法
1.在這里下載DD_belatedPNG.js文件.
2.在網(wǎng)頁中引用,如下:

復(fù)制代碼代碼如下:

 
<!--[if lte IE 6]> 
<script src="Js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script> 
<script type="text/javascript"> 
DD_belatedPNG.fix('div, ul, img, li, input , a, .png_bg'); 
/* 將 .png_bg 改成你應(yīng)用了透明PNG的CSS選擇器*/ 
</script> 
<![endif]--> 

3.有2種調(diào)用函數(shù),一種是DD_belatedPNG.fix(),如上代碼.另一種是fix(),這中方法需要在函數(shù)內(nèi)指出css選擇器名.

使用a:hover請留意
5-25更新:如果你也像jutoy同學(xué)一樣想要用透明PNG作為a:hover時的背景圖片,那么你需要留意你的代碼,需要以”a:hover”來作為選擇器.否則可能會導(dǎo)致無法成功.同時我也更新了demo,請需要的更新查看.接著我們看看正確的代碼:

復(fù)制代碼代碼如下:

 
<!--[if IE 6]> 
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script> 
<script type="text/javascript"> 
DD_belatedPNG.fix('.trans,.box a:hover'); 
</script> 
<![endif]--> 

其他方案
在這里還是提供其他方案供大家參考.