IE6中支援PNG透明度 CSS作法

在IE7之前都尚未支援PNG的透明度，目前IE6市佔率還高的很，所以就苦了我們這些網頁設計師，今天終於搜尋到好方法可以支援IE6 PNG背景透明度的好方法，馬上做個紀錄!

PNG背景透明度：

利用IE特有Filter

#物件ID {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='圖片路徑', sizingMethod='scale');
}

PNG圖片透明度：

CSS怎麼配合各家瀏覽器做微調?

以FireFox跟IE比較padding、margin
FireFox: 設定padding時會影響width、height的寬、高度
IE:設定padding時不影響width、height的寬、高度

用法一 以FireFox為主製作，再對IE做微調
(08/07/01發現底線"_"IE7會判讀了，修正規則如下)
>:IE7以前的版本可以判讀
- :IE6以前的版本可以判讀
>、-:FireFox兩者皆忽略

Example:順序要照範例所寫，不同會有錯誤

div {

width: 98px;/*設定在FF中的寬度*/
>width: 118px;/*設定在IE7中的寬度*/
-width: 118px;/*設定在IE6中的寬度*/
height: 98px;/*設定在FF中的高度*/
>height: 118px;/*設定在IE7中的高度*/
-height: 118px;/*設定在IE6中的高度*/
padding: 10px;
>padding-bottom: 4px;

}

用法二 以FireFox為主製作，再對IE做微調
* +html:IE7可以判讀
* html:IE6以前的版本可以判讀

Example: 順序要照範例所寫，不同會有錯誤

#test {width: 98px; height: 98px;}/*設定在FF中的寬高*/
* html #test {width: 98px; height: 98px;}/*設定在IE6中的寬高*/
* +html #test {width: 98px; height: 98px;}/*設定在IE7中的寬高*/

瀏覽器支援Alpha透明度的Css設定

要如何設定網頁中物件的透明度，又讓眾家瀏覽器都能閱讀，可利用下列的設定方式

.test{

filter:alpha(Opacity=70, Style=0);/*for ie*/
-moz-opacity:0.5;/* Moz + FF */
opacity: 0.5;/* CSS3的標準語法，FOR支援CSS3的瀏覽器（FF 1.5）*/

}

filter:alpha(opacity)是屬於IE的私有屬性，-moz-opacity是屬於Mozilla跟FireFox的私有屬性，opacity則是標準的CSS規則，部分Moz Family也支援CSS3。後面的數值以百分比為單位，三種都設定可以確保透明的效果在以上的瀏覽器裡正確執行。

至於Mac上的Opera並不支援透明度屬性的設定，可是他支援png圖檔，所以可以利用png半透明圖檔設定為背景，也可以達到半透明背景的效果。