rgba和opacity透明比较

在做demo的时候遇到一个问题：

Html:

<div class="ui-jumpto">

<div class="button">Today</div>

<div class="button">Most recent activity</div>

<div class="button">Earliest activity</div>

</div>

Css: 

.ui-jumpto{

opacity: 0.8;                       //webkit等浏览器。 0为完全透明，1为完全不透明

-moz-opacity:0.8;              //Mozilla浏览器 。0为完全透明，1为完全不透明

filter:alpha(opacity=20); //ie下透明方法。100为完全透明，0为完全不透明

}

 

当ui-jumpto这个div设置opacity透明值以后，其中的子元素button也跟着透明了,而这样明显不符合设计要求，所以查了下网上的资料，得到了解决方法：通过rgba代替opacity。

.ui-jumpto{

background: none repeat scroll 0 0 rgba(21, 21, 21, 0.6);

}

效果：

 

下面总结一下rgba的方法：

rgba语法:

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

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

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

A：透明度。取值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代码：

<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(opaity=100);

  }

  li.opacity2 {

    background: rgb(255,255,0);

    opacity: 0.8;

    filter:alpha(opaity=80);

  }

  li.opacity3 {

    background: rgb(255,255,0);

    opacity: 0.6;

    filter:alpha(opaity=60);

  }

  li.opacity4 {

    background: rgb(255,255,0);

    opacity: 0.4;

    filter:alpha(opaity=40);

  }

  li.opacity5 {

    background: rgb(255,255,0);

    opacity: 0.2;

    filter:alpha(opaity=20);

  }

  li.opacity6 {

    background: rgb(255,255,0);

    opacity: 0;

    filter:alpha(opaity=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);

  }

 

我们来看看其效果：

 

更详细的说明可以参考w3cplus网站对rgba讲解的文章：《css3 rgba》