rgba()与opacity的区别

我们都知道在设置透明度的时候，IE低版本时，是不支持opacity的，只支持filter。所以一般在设置透明度时，我们会写上

.opacity4 ｛
    opacity: 0.4;
    filter:alpha(opaity=40);
}

但是其实rgba()也可以设置透明度，那么rgba()到底是什么呢？

rgba()表示红绿蓝 alpha ,W3C指在原有的rgb颜色模型之后增加了 “alpha”参数，“可以让制定的颜色透明化”（rgb()上扩展的，其只可以设置颜色，而不能使设置的颜色透明化）

例子：rgba(55,146,179,.5) ; //rgb值为“55,146,179”，.5使设定的rgb值为50%透明,1为完全不透明，0为完全透明

那么rgba()和opacity的区别是什么？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。

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

 1 <div class="example-opacity">
 2   <p>Opacity效果</p>
 3   <ul>
 4    <li class="opacity opacity1">100%</li>
 5    <li class="opacity opacity2">80%</li>
 6    <li class="opacity opacity3">60%</li>
 7    <li class="opacity opacity4">40%</li>
 8    <li class="opacity opacity5">20%</li>
 9    <li class="opacity opacity6">0</li>
10   </ul>
11   <p>CSS3的RGBA效果</p>
12   <ul>
13    <li class="rgba rgba1">1</li>
14    <li class="rgba rgba2">0.8</li>
15    <li class="rgba rgba3">0.6</li>
16    <li class="rgba rgba4">0.4</li>
17    <li class="rgba rgba5">0.2</li>
18    <li class="rgba rgba6">0</li>
19  </ul>
20 </div>

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

Opacity样式

 1 li.opacity{
 2   float: left;
 3   width: 50px;
 4   height: 50px;
 5 }
 6 li.opacity1 {
 7    background: rgb(255,255,0);
 8    opacity: 1;
 9    filter:alpha(opaity=100);
10 }
11 li.opacity2 {
12   background: rgb(255,255,0);
13   opacity: 0.8;
14   filter:alpha(opaity=80);
15 }
16 li.opacity3 {
17   background: rgb(255,255,0);
18   opacity: 0.6;
19   filter:alpha(opaity=60);
20 }
21 li.opacity4 {
22   background: rgb(255,255,0);
23   opacity: 0.4;
24   filter:alpha(opaity=40);
25 }
26 li.opacity5 {
27   background: rgb(255,255,0);
28   opacity: 0.2;
29   filter:alpha(opaity=20);
30 }
31 li.opacity6 {
32   background: rgb(255,255,0);
33   opacity: 0;
34   filter:alpha(opaity=0);
35 }

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);
}

来看看效果

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

那我们怎么解决IE下父元素用了opacity后子元素会所影响的问题呢？

为了解决这样的问题我们需要增加一个空的div来专门放置使用透明的背景，然后通过使用绝对定位来实现我们需要的结果

HTML结构

1 <div class="bg-box">
2   <div class="bg">  </div>
3    <div class="bg-content">
4       <p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p>
5     </div>          
6 </div>

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

 1 .bg-box {
 2   width: 200px;
 3   height: 100px;
 4   border: 1px solid #ccc;
 5   background: red;
 6   position: relative;
 7 }
 8 .bg {
 9   background: black;
10   opacity: 0.5;
11   filter:alpha(opaity=50);
12   width: 100%;
13   height: 50px;
14   position: absolute;
15   bottom: 0;
16   left: 0;
17   z-index: 1;
18  }
19  .bg-content {
20    width: 100%;
21    height: 50px;
22    position: absolute;
23    bottom: 0;
24    left: 0;
25    z-index: 10;
26  }
27  .bg-content p {
28     padding: 5px 10px;
29     color: white;
30  }

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