Microsoft.AlphaImageLoader濾鏡講解

Microsoft.AlphaImageLoader是 IE濾鏡的一種，其主要作用就是對圖片進行透明處理。雖然FireFox和IE7以上的IE瀏覽器已經支援透明的PNG圖片，但是就IE5-IE6而言還是有一定的意義。

文法： filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled= bEnabled , sizingMethod= sSize , src= sURL ) 屬性：

enabled	:	可選項。布爾值(Boolean)。設定或檢索濾鏡是否啟用。true | false true :　 預設值。濾鏡啟用。 false :　 濾鏡被禁止。
sizingMethod	:	可選項。字串(String)。設定或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。 crop :　 剪下圖片以適應對象尺寸。 image :　 預設值。增大或減小對象的尺寸邊界以適應圖片的尺寸。 scale :　 縮放圖片以適應對象的尺寸邊界。
src	:	必選項。字串(String)。使用絕對或相對 url 地址指定背景映像。假如忽略此參數，濾鏡將不會作用。

特性：

Enabled	:	可讀寫。布爾值(Boolean)。參閱 enabled 屬性。
sizingMethod	:	可讀寫。字串(String)。參閱 sizingMethod 屬性。
src	:	可讀寫。字串(String)。參閱 src 屬性。

說明：在對象容器邊界內，在對象的背景和內容之間顯示一張圖片。並提供對此圖片的剪下和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的圖片的透明度不妨礙你選擇文本。也就是說，你可以選擇顯示在PNG(Portable Network Graphics)格式的圖片完全透明地區後面的內容。樣本：#idDiv{position:absolute; left:140px;
height:400;
width:400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rain1977.gif',sizingMethod='scale');}
.dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/earglobe.gif');} MSDN: http://msdn2.microsoft.com/en-us/library/ms532969.aspx

P.S. 當想使用backgroundimage屬性時，如果不想讓圖片原尺寸顯示，而是類似於IMG width=100% heigth=100% 的效果，可以通過此filter實現。

Example：
span.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.jpg', sizingMethod='scale')";

引用：最後說說關於FF和IE效果調和問題。這個濾鏡效果只適用於IE,在FF下面無法顯示，我想這是前輩說他很難實現的最終問題了。以往我們用*或者_來修複IE下和FF的區別．這一次是要找方法修複FF不能實現的問題.
其實想到的話,也很簡單了.就是先讓FF正常顯示該圖片,然後,用*或_ 來清除IE下的顯示效果，最後用*或_ 來做以上的濾鏡效果。大功告成！

以上是官方的說明。事實上實際操作中需要注意:AlphaImageLoader濾鏡會導致該地區的連結和按鈕無效，一般情況下的解決辦法是為連結或按鈕
添加：position:relative使其相對浮動
要注意的是，當載入濾鏡的地區的父層有position:absolute絕對位置的時候使用position:relative也不能使連結複原。建議
使用浮動辦法處理。

具體操作：

1. 為預覽地區（比如要在某個 div 中預覽）添加樣式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
2. 為 AlphaImageLoader 設定 src 屬性。