使用RGBa和Filter实现不影响子元素的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(, , ); /* RGBa with 0.6 opacity */ background: rgba(, , , 0.6); }

半透明效果仅仅应用于背景－确实很妙，是不是？！ :-)

提示

令人震惊的是，所有的IE（译者注：作者写这篇博客时还没有IE9，IE9在标准渲染模式下是支持RGBa的）都不支持RGBa色彩。幸运的是，2000年疯狂的微软公司在IE中实现了许多过滤器。其中有一个倾斜度过滤器，我们需要做的就是把它的起始颜色和结束颜色定义成同样的值。“OK，可我们要的是透明效果呀？”我知道你会这么想。答案是，我们使用16进制颜色值的一部分来声明起始颜色和结束颜色。使用css倾斜度过滤器达到同样效果的代码如下：

.alpha60 { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#, endColorstr=#); }

看到没。它的颜色值使用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(, , ); /* RGBa with 0.6 opacity */ background: rgba(, , , 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#, endColorstr=#); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; }

注意！作为对本文的补充，你应该使用更可取的条件注释或类似方法为IE浏览器声明透明背景！

浏览器支持

以下浏览器支持 RGBa：

Firefox 3+ Safari 2+ Opera 10

从IE5.5开始，所有的IE浏览器都支持过滤器。

这意味着，我们实际上已经支持所有的浏览器！