CSS3 经典教程系列——CSS3 RGBA 用法详解

<a href="http://www.cnblogs.com/lhb25/archive/2012/12/12/must-read-links-for-web-designers-and-developers-volume-12.html" target="_blank">Web 开发人员和设计师必读文章推荐</a>

<a href="http://www.cnblogs.com/lhb25/archive/2012/03/05/few-new-collections-css3-effects.html" target="_blank">20个非常绚丽的 CSS3 特性应用演示</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html" target="_blank">35个让人惊讶的 CSS3 动画效果演示</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/05/12/2020284.html" target="_blank">推荐12个漂亮的 CSS3 按钮实现方案</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/03/09/1964344.html" target="_blank">24款非常实用的 CSS3 工具终极收藏</a>

　　RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）的色彩空间。虽然它有的时候被描述为一个颜色空间，但是它其实仅仅是 RGB 模型附加了额外的信息从而形成了我们今天需要讨论的 RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。

基本语法:

　　R：红色值。正整数 | 百分数

　　G：绿色值。正整数 | 百分数

　　B：蓝色值。正整数| 百分数

　　A：透明度。取值0~1之间

取值区间：

　　&lt;length&gt; ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

　　&lt;percentage&gt; ：Saturation(饱和度)。 取值为0%到100%之间的值；

　　&lt;percentage&gt; ：Lightness(亮度)。 取值为0%到100%之间的值；

　　&lt;opacity&gt; ：alpha(透明度)。 取值在0到1之间；

简单说明：

　　RGB 色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

　　RGBA 在 RGB 的基础上多了控制 Alpha 透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。

　　浏览器的兼容性：

　　

　　现在我们先来看一个 RGBA 和 Opacity 的对比实例，HTML 代码：

　　我们分别给这两上 ul 中的 li 应用相关样式， 在 li.opacity 中我用使用 CSS2 中的 Opacity 而在 li.rgba 中我们使用 CSS3 的 RGBA新属性。

　　Opacity样式

　　RGBA样：

　　我们来看看其效果：

　　效果中我们可以看出，他们相同之处就是背景色完全是一样的，但区别就是一直让大家觉得头痛的问题，那就是 Opacity 后代元素会随着一起具有透明性，所以我们 Opacity 中的字随着透明值下降越来越看不清楚，而 RGBA 不具有这样的问题，但是其支持的浏览器中有一个占在大市场份额的 IE 不支持，这也就是让我们需要去做兼容，（听到兼容二字大家是不是特烦，我也是的）希望 IE 早点能实现。

　　在 CSS2 中 Opacity 能实现透明，而且大多主流浏览器都支持，虽然 IE 下有点麻烦：

　　那为什么不使用 Opacity 而要使用 RGBA 呢？

　　从我们上面的实例中我们也知道，RGBA 比元素设置 CSS 的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度。

　　在 RGBA 还没有出世前，我们都是使用 Opacity 来做透明，但这里存在一个问题，就是我们在父元素中使用了 Opacity，那么其垢代元素都会受其影响，我想这个问题大家都有碰到过，为了解决这样的问题我们需要增加一个空的 div 来专门放置使用透明的背景，然后通过使用绝对定位来实现我们需要的结果。为了更好的理解我们在这里来看一个使用 Opacity 的实例。首先来看 HTML：

　　先给他们附上相应的样式：

　　效果：

　　从效果中我们明显的看出，这里和我们前面那个例子一样，名叫 bg 的 div 中设置了Opacity，造成其后代元素段落P的前景色也随着变了。如果需要解决这样的问题，在不使用别的新技术下，也就是说坚持使用 Opacity。那么我们就需要添加一个空的层，在这个地方应用透明背景层首先来看看改变一下 HTML 结构吧

　　现在我们需要提把 bg-content 和 bg 层重合起来，换句话说就是把透明背景层单独放在另外一个 div，然后把内容层和背景层重叠。换而言之，我们需要在 bg 这个 div 上设置透明色，而在 bg-content 这个 div 上放置内容，并且都使用定位，保证 bg 这个 div 在 bg-content 这个 div 下面。具体看看其 CSS 的变化：

　　首先我们在 HTML 中把 bg 这个 div分 离出来了，让他和 bg-content 这个 div 变成兄弟关系，然后通过 CSS 把他们都定位在同一位置，只是 bg 放在了 bg-content 的下面（z-index）控制，另外在 bg 的 div 上应用了透明。看看这样一来我们有什么变化，效果如下：

　　跟没有处理之前相比是不是完美多了。可是这样弄就是有一点麻烦，现在 CSS3 的 RGBA 完全可以帮大家解决这样的问题了，接着我们在看一个用 RGBA 制作的效果吧，看看他是不是完全一样的。

　　HTML代码：

　　我们只要在 bg-content 中应用一个 background:rgba(); 就能有上面那种效果了，具体看看代码吧：

　　从效果的对比中我们可以明显的看出，和 Opacity 做出的效果是完全一样的。但是这里有一个问题是我们讨厌的IE（除IE9以外）都不支持 CSS3 的 RGBA 属性。

　　那么这样我们在 IE 下不是什么都没有吗？回答是肯定的，虽然 IE 不支持但我们不能什么都不给他呀，这样一来我们就碰到一个新名词"fallback color",它的意思是我给IE备份一个色，在不支持 RGBA 的情况下，我照样给他一个色，而对 RGBA 支持的浏览器并不会带来影响，那我们一起看看这个fallback color怎么用吧。

　　其实很简单，我们可以给其制作一张图片或都只给其加一个色，我们这些就只加一个色吧拿前面的实例来说吧，我们只要把 bg-content 的样式换一下：

　　上面代码中的颜色值可以根据自己的需求修改，此处只是一个代表性的值。

　　我们前面简单的带过一句，我们 RGBA 不单可以应用在 background 上，我们还可以应用在只要设置了颜色的地方都可以使用，我在这里简单的说一下几种：

　　第一种：前景色color

　　HTML：

　　CSS样式：

　　第二种边框色border-color

　　第三种：字体的阴影色text-shadow

　　CSS：

　　第四种改变边框阴影色

　　效果:

　　最后需要告诉大家的一点，这几种使用 RGBA 的方法，目前只有在支持 RGBA 属性的浏览器才能正常显示，如果需要使用的朋友，请考虑这方面的显示差别。那么到这里关于 CSS3 的 RGBA 我就介绍完了，希望能给大家的学习带来一定的帮助，更希望志同道合的朋友一起探讨一起学习一起进步。

<a href="http://help.dottoro.com/lanifqvh.php" target="_blank">Colors in CSS</a>

<a href="http://www.zenelements.com/blog/css3-rgb-rgba-color-opacity/" target="_blank">CSS3 RGB &amp; RGBA</a>

<a href="http://www.css3.info/introduction-opacity-rgba/" target="_blank">A brief introduction to Opacity and RGBA</a>

<a href="http://www.css3.info/preview/rgba/" target="_blank">RGBA colors</a>

<a href="http://css-tricks.com/yay-for-hsla/" target="_blank">Yay for HSLa</a>

<a href="https://developer.mozilla.org/en-US/docs/CSS/color_value" target="_blank">color (CSS data type)</a>

<a href="http://www.w3.org/TR/css3-color/" target="_blank">CSS Color Module Level 3</a>

欢迎任何形式的转载，但请务必注明出处。