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 屬性。