DIV CSS 佈局教程網

我們知道IE6是不支持透明的PNG的,這無疑限制了網頁設計的發揮空間.
然而整個互聯網上解決這個IE6的透明PNG的方案也是多不勝數,從使用IE特有的濾鏡或是e­xpression,再到javascript+透明GIF替代.但是這些方法都有一個缺點,就是不支持CSS中backgrond-position與background-repeat.

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

看Demo

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

使用方法
1.在這裡下載DD_belatedPNG.js文件.
2.在網頁中引用,如下:

復制代碼 代碼如下:
<!--[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 改成你應用了透明PNG的CSS選擇器*/
</script>
<![endif]-->

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

使用a:hover請留意
5-25更新:如果你也像jutoy同學一樣想要用透明PNG作為a:hover時的背景圖片,那麼你需要留意你的代碼,需要以”a:hover”來作為選擇器.否則可能會導致無法成功.同時我也更新了demo,請需要的更新查看.接著我們看看正確的代碼:
復制代碼 代碼如下:
<!--[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]-->

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

• Unit PNG Fix
• ie7-js
• IE PNG Fix