設定MENU透明背景

  • 文章分類: 學CSS
  • 9/29/2010
MENU背景透明化的語法： 
filter:alpha(opacity=100);opacity:1.0; →透明度0%( 完全不透明 )
filter:alpha(opacity=50);opacity:0.5;→透明度50%
filter:alpha(opacity=0);opacity:0;→透明度100( 完全透明 )

實例如下：

#mainmenu {
background:#666;
height:25px;
width:610px;
filter:alpha(opacity=60);
opacity:0.6;
}

說明

將主選單的背景顏色透明度設為60%。
結果如下圖：

重點提醒

  • 使用透明度時會讓同階層的文字也變透明。
  • 透明度的語法不可放到 mainmenu ul 之後的階層，只可放在mainmenu 及mainmenu-body ，否則在IE裡的mainmenu 底下的階層會發生錯誤。
  • 透明度的語法在使用在mainmenu 及mainmenu-body 時，在Mozilla Firefox裡會讓mainmenu裡所有的下階層都繼承透明度，但是在IE裡不受影響。
  • 此透明度使用方法也可用在其他處。
  • ※opacity數字越高透明度越低，數字越低透明度越高，opacity的值可為0~100。