原文發表於 2010.1.11 shukebeta 翻譯
譯者按：這篇文章里提到的IE解決方案，還是有一些問題的。且不說IE9既支持RGBa又支持Filter會給我們帶來麻煩，過濾器這種東西說不准 啥時候就會導致渲染問題。我建議對支持rgba的瀏覽器只使用rgba，同時為不支持rgba的瀏覽器留一個非透明背景的退路。以下為原文譯文：
今天的網頁設計，幾乎毫無例外地包含一些半透明元素，然而，要使用CSS得到需要的效果，需要頗費些思量。
問題
如果我們想要一個元素擁有半透明的背景，我們有兩個選擇：
使用CSS和 opacity 做一張 24-bit PNG 背景圖片 在CSS中使用opacity有兩個問題，一是為了適應所有的瀏覽器，我們要對付opacity討厭的語法；二是opacity不僅使目標元素的背 景變得半透明，而且使它所有的子元素的背景也變成了半透明。這意味着它里面所有的文本（譯者注：圖片也一樣）都具有同樣的透明度，我敢肯定沒幾個人想要這 樣的效果。可以通過添加一些不必要的元素，使用CSS定位技巧類似的手段躲開這個問題，歸根結底，亂就一個字。
使用PNG圖片也有問題，除了不必要的HTTP請求之外，圖片體積再小也比兩行CSS代碼大－特別是在IE里面，為了避免24-bitPNG圖片嚴重的內存泄漏問題，這張圖還必須額外大一點。
解決方案！
綜上種種，我願意很高興的提供一種替代方案：RGBa顏色。這個方案的優點在於你可以設定正常的RGB顏色值，再加上你想要的透明度，OK，這就得到了半透明的背景色。用CSS寫出來，再加上對不支持rgba瀏覽器的優雅降級，代碼如下：
.alpha60 { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); } 半透明效果僅僅應用於背景－確實很妙，是不是？！ :-)
提示
令人震驚的是，所有的IE（譯者注：作者寫這篇博客時還沒有IE9，IE9在標准渲染模式下是支持RGBa的）都不支持RGBa色彩。幸運的 是，2000年瘋狂的微軟公司在IE中實現了許多過濾器。其中有一個傾斜度過濾器，我們需要做的就是把它的起始顏色和結束顏色定義成同樣的值。“OK，可 我們要的是透明效果呀？”我知道你會這么想。答案是，我們使用16進制顏色值的一部分來聲明起始顏色和結束顏色。使用css傾斜度過濾器達到同樣效果的代 碼如下：
.alpha60 { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); } 看到沒。它的顏色值使用8位16進制值聲明，其中第一第二位是16進制的alpha值 ，后面兩位是R，再后面是G，再后面是B。和RGBa不同的是，它使用16進制數而不是0－255的顏色值。那我們怎樣才能得到alpha0.6級別的16進制值？
我們現在需要做點算術題。我們需要alpha0.6級，將它乘上255－－再把結果轉換成16進制。一個簡單方法是使用Google搜索功能，只需 要在關鍵詞那兒寫上 0.6 * 255 in hex 就可以了。不幸的是Google的計算器好象只支持整數，象 0.3 * 255 in hex這樣的關鍵字根本得不到結果。
好在，還有一個也不算慢的手段，我們可以利用JavaScript。打開Firebug，然后在JavaScript控制台輸入：
// Replace 0.6 with your desired alpha level Math.floor(0.6 * 255).toString(16); 我們得到結果 99，也就是alpha0.6級別對應的16進制數。這就是傾斜度過濾器所需要的起始和結束值。
總結
綜合以上技術，我們寫一份能在生產環境中使用的CSS：
.alpha60 { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; } 注意！作為對本文的補充，你應該使用更可取的條件注釋或類似方法為IE瀏覽器聲明透明背景！
瀏覽器支持
以下瀏覽器支持 RGBa：
Firefox 3+ Safari 2+ Opera 10 從IE5.5開始，所有的IE瀏覽器都支持過濾器。
這意味着，我們實際上已經支持所有的瀏覽器！
鳴謝：
Thanks to RGBa Browser Support and Bulletproof, cross-browser RGBA backgrounds, today for the information and inspiration.
Thanks to Emil Stenström and Pelle Wessman for coming up with countless alternatives for hex conversion, and explaining basic math to stupid me. :-)