標籤：
在我們前端設計裡有兩篇教程： CSS3 RGBA colors使用說明 css3中opacity屬性學習與實踐，他們公別介紹了RGBA,RGB,opacity的用法，這裡我們把這三個屬性放在一起來考慮：CSS3 RGBA等於RGB加上opacity嗎?
請別先回答，我們接下來分析分析。
以前我們經常會碰到這樣一個問題，設定了一個div的opacity(透明度)以後，這個div層裡的內容也跟著透明了，特別是文字，一透明就離我 們想要的效果差很遠了，顯示這不是我們需要的。以前我遇風這種情況通常是把透明的div與原先放在他中間的內容分成兩個平級的元素，然後通過定位來使內容 的元素蓋中透明div的上面，一般的問題還是可以解決，不過也不問題，想想，如果我們的內容有多有少的話，那怎麼辦？js吧，呵呵，又是這麼沒效益的事來 了。
下面我們來看看在CSS3中遇見到這種情況的那些事兒
RGBA,RGB,opacity這三個屬性前面都有講過，這裡我再重複一下，RGBA是定義一個顏色的紅綠藍值和這個顏色的透明度。RGB則只是定義了顏色的紅綠藍值，opacity是定義一個元素的透明度。發現重點了嗎？
opacity是定義一個元素的透明度，對於一個網頁來說，這裡的元素及一個具體的“東西”,比如一個布局元素，一個圖元素，頁RGBA和RGB是定義的是這個元素的屬性
我的理解是:定義元素跟定義元素屬性這兩個詞跟元素本身的層次都不一樣了。
我的理解可能不對，不過看看下面的執行個體，你就明白了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 RGBA</title> <style> html,body,h1,h2,p,pre{margin:0;padding:0;} body{padding:0 20px;background:#090;color:#000;font:14px/1.6 Arial;} h1{font-size:26px;} h2{padding:10px 0;font-size:16px;} pre{padding:2px 0;} div{padding:0 20px;border:1px solid #fff;color:#fff;} .grammar{padding:0 20px;border:0 none;font-weight:bold;font-size:16px;} #hex{ background-color:#000000; } #rgb{ background-color:rgb(0,0,0); } #rgb-alpha{ background-color:rgb(0,0,0); opacity:.5; } #rgba{ background-color:rgba(0,0,0,.5); } .tips{padding:10px;color:#c00;} .notes{padding:2px 10px;background:#eee;} .navigation{padding:10px 0;} .copyright{padding:10px 0;font-style:italic;font-weight:bold;font-size:14px;} </style> </head> <body> <h1>CSS3 RGBA:</h1> <p class="notes">瀏覽器參照基準：Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE系列不做參考</p> <h2>文法：</h2> <div class="grammar"> rgba(0-255,0-255,0-255,0-1) </div> <h2>HEX顏色中的黑色：</h2> <div id="hex"> <pre><code>background-color:#000000;</code></pre> </div> <h2>RGB顏色中的黑色：</h2> <div id="rgb"> <pre><code>background-color:rgb(0,0,0);</code></pre> </div> <h2>RGB顏色+opacity透明度：</h2> <div id="rgb-alpha"> <pre><code>background-color:rgb(0,0,0); opacity:.5;</code></pre> </div> <h2>RGBA顏色：</h2> <div id="rgba"> <pre><code>background-color:rgba(0,0,0,.5);</code></pre> </div> </body> </html>
文章來自：http://www.webskys.com/css3/74.html
CSS3 RGBA等於RGB加上opacity嗎?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
