原文发表于 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. :-)