我们都知道在设置透明度的时候 ，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 上应用了透明。看看这样一来我们有什么变化，效果如下：
