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 屬性實際範例
css code複製內容到剪貼簿
範例的輸出效果
範例共準備了三個加入 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」。
opacity透明度屬性的繼承問題
css3的opacity透明度屬性具有繼承性，當對某個物件設定了opacity透明度屬性的時候，其子集元素也會有透明度效果；
xml/html code複製內容到剪貼簿
css：
css code複製內容到剪貼簿
總結： 使用rgba的背景色可以很直接的設定物件的透明度效果，而且對其子集元素沒有繼承性；而使用rgb色並設定opacity透明度屬性的物件卻產生了透明度繼承。
不過，可能你把整個**都copy下來並在ie9以下的瀏覽器都測試的話，你會發現在ie7、ie8瀏覽器**現了設定opacity透明度屬性的物件中子集元素並沒有繼承父集元素的透明度效果，並且設定了背景色為rgba的物件反而沒有任何效果。這是因為： 在設定了opacity透明度屬性的物件中的子集元素設定了position:relative屬性，這才使得它在ie9以下的瀏覽器中得到了解決；其次在ie9以下的瀏覽器並不相容rgba色，所以，你會看到第二種的背景色沒有效果。
本文標題: 詳解css3的opacity屬性設定透明效果的用法
本文位址: /web/css/84420.html
解決CSS3的opacity屬性帶來的層疊順序問題
在最近的乙個作品中，utumai在使用 opacity 屬性來實現頁面整體透明的時候，發現了乙個問題。如果兩個層發生了重疊，使用了 opacity 屬性並且屬性值小於1的層，會覆蓋掉後面的層。於是動手做了個實驗，來驗證 opacity 的層次。網頁中的層疊規律是這樣的 如果兩個層都沒有定義 posi...
CSS3中的變形處理 transform 屬性
在css3中，可以利用transform功能來實現文字或影象的旋轉 扭曲 縮放 位移 矩陣 原點 這六種型別的變形處理，下面將詳細講解transform的使用。變形 旋轉 rotate div.box 順時針旋轉45度 變形 扭曲 skew div.box 通過skew 函式將長方形變成平行四邊形。...
詳解CSS3漸變
漸變，指形狀或顏色的有規律性的變化，往往可以給人很強的節奏感和審美情趣，這裡研究的主要是顏色的漸變。漸變的形式在日常生活中很常見，在網頁中的用的也很多，傳統網頁技術中往往用來實現漸變，容易帶來載入負擔和動態定製的瓶頸。css3提供了實現漸變的屬性，隨著瀏覽器的逐步支援，研究css3漸變已勢在必行。涉...