利用 AlphaImageLoader 解決 IE6 對 png 圖檔的透明問題

之前都利用 JavaScript 的 htc 去解決 png 的透明問題
但是在 JavaScript 作動前 png 是不會正常顯示的
在學會 AlphaImageLoader 的使用後發現效果還蠻好的

但是會有一些奇怪後遺症
就是區域內的連接都失效了
解決的方式就是在利用一個元素放在區域內
然後設有 position:relative; 的屬性
連結修正無法生效在設有 position:absolute; 的區域內

CSS :

#ContainerWrapper{
    background: transparent url(/images/border_bg.png) repeat-y;
    width:982px;
    margin:0 auto;

    /*IE6 PNG 檔透明修正設定*/
    _background: transparent;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/border_bg.png', sizingMethod='scale');
}

#ContainerWrapper #Container{
    /*修正 AlphaImageLoader 造成的連結失效問題*/
    _position:relative;
}

HTML:

<div id="ContainerWrapper">
    <div id="Container">
    </div>
</div>

AlphaImageLoader 的參數值

1. enabled:布林值(Boolean)。是否開啟濾鏡(基本上可以忽略這個設定)
   
   • true:開啟濾鏡(預設值)
   • false:關閉濾鏡
     
     
2. sizingMethod:字串(String)。設定圖片在元素容器裡的顯示方式
   
   • crop:剪切圖片以符合應元素尺寸
   • image:使元素尺寸符合圖片尺寸(預設值)
   • scale:縮放圖片以符合元素尺寸
     
     
3. src :字串(String)。指定圖片的路徑，注意這個路徑是指加載濾鏡的頁面相對於圖片的路徑而不是css文件相對於圖片的路徑。
   建議統一使用以 DocumentRoot 為準的絕對路徑
   

參考來源：
Microsoft.AlphaImageLoader滤镜讲解