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 代码：

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

来看看效果

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

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

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

HTML结构

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

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

.bg-box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  background: red;
  position: relative;
}
.bg {
  background: black;
  opacity: 0.5;
  filter:alpha(opaity=50);
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
 }
 .bg-content {
   width: 100%;
   height: 50px;
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 10;
 }
 .bg-content p {
    padding: 5px 10px;
    color: white;
 }

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