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 設計技巧

• CSS3 transition 屬性
• CSS3 animation 動畫屬性