半透明的 DIV 通常用來做畫面上的遮罩,可以遮住畫面上的按鈕、輸入框等不被使用者點擊,而其半透明的背景又可以讓使用者看到畫面上的內容。以下將介紹如何設定半透明的 DIV。
在 IE 與 Firefox 上,其半透明的屬性又各有不同。
 
IE 裏要透過設定 style 的 filter 屬性來達成半透明,其值為 Alpha(Opacity=50, Style=0)。
其中可設定 Opacity 的值來改變透明度。 
 
Firefox 中則要設定 style 中的 opacity 屬性,但在此篇文章中則描述說 opacity 屬性在 opera 有效但在 Firefox 下是無效的,要另行設定 Firefox 特有屬性 -moz-opacity 才行,不過經過實際的測試,至少在 Firefox 3.5 下,opacity 屬性是有效的。
opacity 屬性值為 0 ~ 1 的浮點數,用來決定透明度。
 
當然若要同時能在 IE 與 Firefox 下皆能呈現半透明效果,則將此兩種屬性皆設定上去即可。
以下為範例程式碼:
 
    <div style="width:300px; height:300px; background:black; opacity: 0.5; filter:Alpha(Opacity=50, Style=0)"> </div>
 
以下為效果展示:
123
 


參考資料:
     http://bbs.51js.com/viewthread.php?tid=66384
arrow
arrow
    全站熱搜

    大笨鳥 發表在 痞客邦 留言(0) 人氣()