讓PNG去背效果也能在IE6正常顯示

網頁上所插入產品之類的圖片，若是沒有去背的話，則會有"貼膏藥"的塊狀感。單純的去背處理最好是在同頁面背景色的情況下處理，才能降低鋸齒邊的明顯度。

在IE7問世後，網頁設計人員紛感欣慰的是對PNG透明背景的支援。然而IE6市佔率存在的事實與客戶IE6相容的要求下，仍可能要準備GIF圖檔給IE6使用。

要解決PNG去背效果在IE6正常顯示，要使用微軟IE專用的濾鏡語法:

‹style type="text/css"›
.bgPhoto { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='system_stop_ok.png', sizingMethod='image');width:365px;height:157px;}
‹/style›

‹body›‹div class="bgPhoto"›‹/div›‹/body›


在‹div class="bgPhoto"›‹/div›容器裡會呈現一張寬365px、高157px的PNG圖，而且在IE6、IE7上均能正常顯示已有的去背效果(要PNG圖本身已做好去背才行)，FireFox則是以正常的CSS語法即可!!

語法說明如下:

1. sizingMethod有crop、image、scale三種。image是預設值，也就是頁面PNG圖片會依照原本Size顯示。如果使用scale的話，圖片則會依照div容器的尺寸縮放；如果用crop且圖片尺寸比DIV還大的話，圖片超出DIV的部分則會被切掉，局部顯示。
2. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/sample.png', sizingMethod='scale',enabled=FALSE);
   enabled則為效果的開關，如果值是false或1，就等於整個濾鏡效果都停用。
3. 使用AlphaImageLoader的做法，無論是寫在CSS還是HTML中，其圖片路徑一律皆採用HMTL檔案位置與圖片的相對路徑來寫(非CSS檔案與圖檔的相對路徑關係哦!!)，否則會找不到圖片。