經典背景音樂

2022年3月12日 星期六

CSS3 opacity 屬性 (透明效果)

 CSS3 opacity 屬性的功能是用來控制網頁元素的透明效果(調整不透明度),早期網頁設計常常會用到許多的透明效果,通常都是透過 png 圖層來製作透明的感覺,現在網頁設計師可以使用 CSS3 opacity 屬性來輕鬆的達到網頁元素不透明度的調整,CSS3 opacity 屬性的語法非常簡單,只需要透過數字的調整,就能呈現出不同的不透明度,進而設計出相當具有現代感的網頁風格,可應用在網頁圖片、DIV 區塊、span 區域、Table 表格 ... 等元素,所有新版的主流瀏覽器都支援 CSS3 opacity 屬性的效果。


CSS3 opacity 屬性基本語法
opacity: 不透明度;
CSS3 opacity 屬性參數的"不透明度"是以數字表示,從 0.0 至 1.0 都可以,完全透明是 0.0,完全不透明是 1.0,換句話說,數字越大代表元素越不透明。參數除了可以使用"不透明度"之外,還有 inherit 繼承父層屬性,不過瀏覽器支援度較差,不建議使用。

CSS3 opacity 屬性實際範例
<div style="padding:10px;background-color:green;opacity:0.1;">
測試 CSS3 opacity 屬性的不透明度處理
</div>
<div style="padding:10px;background-color:green;opacity:0.5;">
測試 CSS3 opacity 屬性的不透明度處理
</div>
<div style="padding:10px;background-color:green;opacity:0.8;">
測試 CSS3 opacity 屬性的不透明度處理
</div>
範例的輸出效果
測試 CSS3 opacity 屬性的不透明度處理
測試 CSS3 opacity 屬性的不透明度處理
測試 CSS3 opacity 屬性的不透明度處理
範例共準備了三個加入 opacity 效果的 DIV 區塊,各位可以注意到從最上面開始的第一個區塊,不透明度為 0.1(opacity:0.1)所以整個區塊變成幾乎快看不到顏色與文字,第二個區塊不透明度設為 0.5(opacity:0.5),所以比第一個區塊清楚多了,第三個區塊再度降低不透明度到 0.8,文字與背景顏色都越更加明顯,這就是 CSS3 opacity 屬性的實際效果,由範例可以很清楚的看到,一個 DIV 區塊內的文字內容與背景顏色(background-color)都會受到 opacity 屬性的不透明度影響。

補充:目前新版的主流瀏覽器均有支援 CSS3 opacity 屬性,但需要注意的是 IE8 以即更早版本的 IE 瀏覽器必須使用替代語法來實做,所謂的替代語法是利用 filter 屬性,寫法如「filter:Alpha(opacity=50);」,效果等於「opacity:0.5」。

將 CSS3 opacity 不透明度效果應用在圖片上的技巧,請參閱:CSS3 Image Opacity 圖片透明效果

更多 CSS3 設計技巧

沒有留言: