CSS3與濾境(2)-透明度

這一篇只說明透明濾境(opacity)的語法,順便瞭解IE濾境的語法的撰寫方式。在「CSS3與濾境」系列文章中,會穿插CSS3與IE濾境語法,兩者的語法與使用方式都不同,必需要特別注意。由於IE濾境語法是逐漸被淘汰的語法,所以本文的介紹還是以CSS3為主。CSS3的語法和前面介紹的一樣,是「selector { 屬性:值; }」的形式;而IE濾境則不同,是「selector { filter:濾鏡(屬性2=值2,屬性2=值2); }」。本站將全部的IE濾鏡特效整理成一張表格,方便網友一目了然,裡面的語法將陸續介紹(請使用IE瀏覽器開啟,並執行ActiveX,才能看到效果;點擊圖示上的連結可顯示轉場動畫)。

屬性名稱

opacity(透明度)、alpha(透明度,IE濾境)

opacity

說明:設定物件的透明度。

屬性值:(0~1之間的數值)、inherit(繼承父元素設定)

【範例】

.img {
    opacity:0.5;    /* 不支援IE8以前瀏覽器 */
}

【結果】

alpha

說明:IE濾境,設定物件的透明度。範例結果請參考這裡

屬性值:opacity=透明度(0~100%), finishopacity=結束時的透明度(0~100), style=透明的形狀:0統一、1線形、2放射狀、3方形, startx=透明起點x座標, starty=透明起點y座標, finishx=透明終點x座標, finishy=透明終點y座標

【範例】

.img {
    filter:alpha(opacity=50);   /* IE濾境-支援IE8以前瀏覽器 */
}