2011年11月19日 星期六

解決 PNG透明圖 在舊版IE無法正常運作的問題

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


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

沒有留言:

張貼留言