利用CSS3的opacity屬性設定透明效果的用法介紹

這篇文章主要介紹了詳解CSS3的opacity屬性設定透明效果的用法,同時還講到了opacity透明度帶有的繼承性影響子集元素的問題,值得初學者注意,需要的朋友可以參考下

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

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

CSS3 opacity 屬性實際範例

<p style="padding:10px;background-color:green;opacity:0.1;">   測試 CSS3 opacity 屬性的不透明度處理   </p>   <p style="padding:10px;background-color:green;opacity:0.5;">   測試 CSS3 opacity 屬性的不透明度處理   </p>   <p style="padding:10px;background-color:green;opacity:0.8;">   測試 CSS3 opacity 屬性的不透明度處理   </p>

範例的輸出效果

範例共準備了三個加入 opacity 效果的 p 區塊，各位可以注意到從最上面開始的第一個區塊，不透明度為 0.1（opacity:0.1）所以整個區塊變成幾乎快看不到顏色與文字，第二個區塊不透明度設為 0.5（opacity:0.5），所以比第一個區塊清楚多了，第三個區塊再度降低不透明度到 0.8，文字與背景顏色都越更加明顯，這就是 CSS3 opacity 屬性的實際效果，由範例可以很清楚的看到，一個 p 區塊內的文字內容與背景顏色（background-color）都會受到 opacity 屬性的不透明度影響。

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

opacity透明度屬性的繼承問題
CSS3的opacity透明度屬性具有繼承性，當對某個對象設定了opacity透明度屬性的時候，其子集元素也會有透明度效果；

<p class="main">  <p class="p1">    <p>背景色為rgb的opacity效果</p>  </p>  <p class="p2">    <p>背景色為rgba的透明效果</p>  </p></p>

CSS：

.main{     clear:rightright;     margin:20% auto;     overflow:hidden;     width:335px;   }   .main p{     color:red;     float:left;     display:inline-block;     width:160px;     height:160px;     text-align:center;   }   /*使用opacity透明屬性的顯示效果*/.p1{background-color:rgb(0,0,0);     opacity:0.5;     filter:alpha(opacity=50);     -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';margin-right:15px;   }   .p1 p{     position:relative;   }   /*使用rgba色顯示的效果*/.p2{     background:rgba(0,0,0,.5)   }

總結： 使用rgba的背景色可以很直接的設定對象的透明度效果，而且對其子集元素沒有繼承性；而使用rgb色並設定opacity透明度屬性的對象卻產生了透明度繼承。

不過，可能你把整個代碼都copy下來並在IE9以下的瀏覽器都測試的話，你會發現在IE7、IE8瀏覽器中出現了設定opacity透明度屬性的對象中子集元素並沒有繼承父集元素的透明度效果，並且設定了背景色為rgba的對象反而沒有任何效果。這是因為： 在設定了opacity透明度屬性的對象中的子集元素設定了position:relative屬性，這才使得它在IE9以下的瀏覽器中得到瞭解決；其次在IE9以下的瀏覽器並不相容rgba色，所以，你會看到第二種的背景色沒有效果。