CSS关于透明度的处理

在CSS3以前，我们处理透明度用的是opacity属性，opacity属性有一个弊端就是兼容性不好，当我们用的时候，需要进行兼容性处理，必须在样式中同时写上4个样式，

filter:alpha(opacity=50)---------------兼容IE

-moz-opacity:0.5----------------------兼容FireFox

-khtml-opacity:0.5--------------------兼容webkit内核浏览器

opacity:0.5----------------------------兼容Chrome、Opera、Safari等

采用这种形式，给父元素设置透明度，子元素也会跟着变透明；

后来有了CSS3，就有了rgba来代替上述透明度表现形式，而且不考虑兼容问题

background:rgba(0,0,0,0.5)，这种写法的好处当然不止兼容性问题解决了，更棒的地方在于它对父元素设置透明度，不会影响子元素的透明度；

.rgba{
            width:100px;
            height:100px;
            background:rgba(0,0,0,0.3);
        }
        .opacity{
            width:100px;
            height:100px;
            background:#000;
            color:red;
            filter:alpha(opacity=0.3);/*IE*/
            opacity: 0.3;
            -moz-opacity: 0.3;
            -khtml-opacity: 0.3;
}
           

<!--父元素半透明，子元素不透明-->
<div class="rgba"> 
  <p>我是子元素文字1</p>
</div>

<!--父元素和子元素都是半透明-->
<div class="opacity">
   <p>我是子元素文字2</p>
</div>