IE6中CSS方法實現PNG圖片透明

關於ie6中使用png

之前知道的方法都是比較複雜的，使用js或者濾鏡。
最近在同事那裏學到了比較簡單的方法：

1、使用質量較好的圖片，比如png24、png32、png8，都可以；然後針對ie6可以單獨使用一張沒有特別效果的圖片，保存成png8或者gif都可以，但最好是png8；注：png8與gif都是索引色透明。（這個是稍微簡單的方式了）

2、保存格式選爲png8，對於邊緣有半透明效果的需要特殊處理，ie6下纔可以識別； 處理方法：色板處設置顏色爲圖片要融入的背景顏色。一定要是alpha透明纔可。(FW)

來源：http://www.cnblogs.com/oneroundseven/archive/2011/04/19/2021328.html

第一種，只通過CSS讓IE6顯示PNG透明背景：

1、 使用CSS濾鏡寫法，公式如下

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader 
( enabled='bEnabled' , sizingMethod='sSize' , src='sURL' ) 

enabled= : true :濾鏡激活。 false :濾鏡被禁止。
sizingMethod= : crop :剪切圖片以適應對象尺寸。 [即不平鋪]
image : 默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。 [一般不採用]
scale : 縮放圖片以適應對象的尺寸邊界。 [即平鋪]
src :使用絕對或相對 url 地址指定背景圖像。假如忽略此參數，濾鏡將不會作用。

2、 使用例子，兼容IE6、FF、OP等CSS寫法：

/* 爲保證PNG圖片位置正確，使用絕對路徑 */

#div{
      width: 300px;
      height: 99px;
      background: url('images/top.png') no-repeat top;
}

* html #div {
      background: none;
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
      (enabled='true', sizingMethod='corp', src='http://www.wdsxp.com/blog/template/flower/images/top.png');
} 

/* 以下是簡易寫法 ,運用IE6的*獨立識別特性 */
#div{
      width: 300px;
      height: 99px;
      background: url('images/top.png') no-repeat top;
      *background: none;
      *filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
          (enabled='true', sizingMethod='corp', src='template/flower/images/top.png');
} 

3、 注意事項，使用以上CSS濾鏡的DIV容器裏的鏈接失效，解決方法是 a: position:relative; 以上效果在IE6不會出現短暫的灰色背景。

第二種，使用 iepngfix 濾鏡，此方法包含 iepngfix.htc、blank.gif、CSS ：

1、將 iepngfix.htc 和 blank.gif 2個文件上傳到相應目錄
2、通過CSS編寫PNG透明，以下寫法兼容IE6、IE7、IE8、FF、OP ：

/* 背景定義下加入 iepngfix.htc 鏈接 */
#div{
    width: 300px;
    height: 99px;
    background: url('images/top.png') no-repeat top;
    behavior: url("template/flower/js/iepngfix.htc");
}

3、注意事項，以上文件存放目錄爲：CSS–根目錄，iepngfix.htc–js文件夾，blank.gif–images文件夾