前面我们一起探讨了一下CSS3 Gradient（css3 渐变），今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生，他就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。

语法:

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

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

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

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

取值：

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

<percentage> ：Saturation(饱和度)。 取值为0%到100%之间的值；

<percentage> ：Lightness(亮度)。 取值为0%到100%之间的值；

<opacity> ：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 这个东西。他在我们CSS2中制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就只能在边上站着了，有心无力呀。

现在我们先来看一个rgba和opacity的对比实例

HTML代码：

<div class="example-opacity">
  <p>Opacity效果</p>
  <ul>
   <li class="opacity opacity1">100%</li>
   <li class="opacity opacity2">80%</li>
   <li class="opacity opacity3">60%</li>
   <li class="opacity opacity4">40%</li>
   <li class="opacity opacity5">20%</li>
   <li class="opacity opacity6">0</li>
  </ul>
  <p>CSS3的RGBA效果</p>
  <ul>
   <li class="rgba rgba1">1</li>
   <li class="rgba rgba2">0.8</li>
   <li class="rgba rgba3">0.6</li>
   <li class="rgba rgba4">0.4</li>
   <li class="rgba rgba5">0.2</li>
   <li class="rgba rgba6">0</li>
 </ul>
</div>

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

Opacity样式

  li.opacity{
    float: left;
    width: 50px;
    height: 50px;
  }
  li.opacity1 {
     background: rgb(255,255,0);
     opacity: 1;
     filter:alpha(opacity=100);
  }
  li.opacity2 {
    background: rgb(255,255,0);
    opacity: 0.8;
    filter:alpha(opacity=80);
  }
  li.opacity3 {
    background: rgb(255,255,0);
    opacity: 0.6;
    filter:alpha(opacity=60);
  }
  li.opacity4 {
    background: rgb(255,255,0);
    opacity: 0.4;
    filter:alpha(opacity=40);
  }
  li.opacity5 {
    background: rgb(255,255,0);
    opacity: 0.2;
    filter:alpha(opacity=20);
  }
  li.opacity6 {
    background: rgb(255,255,0);
    opacity: 0;
    filter:alpha(opacity=0);
  }

RGBA样式

  li.rgba {
    float: left;
    width: 50px;
    height: 50px;
  }
  li.rgba1 {
    background: rgba(255,255,0,1);
  }
  li.rgba2 {
    background: rgba(255,255,0,0.8);
  }
  li.rgba3 {
    background: rgba(255,255,0,0.6);
  }
  li.rgba4 {
    background: rgba(255,255,0,0.4);
  }
  li.rgba5 {
    background: rgba(255,255,0,0.2);
  }
  li.rgba6 {
    background: rgba(255,255,0,0);
  }

我们来看看其效果：

效