2009-07-19

利用 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滤镜讲解

0 回應: