opacity的问题及其解决方法

问题：如果父元素设置opacity：.5那么这个的所有子元素都会受影响（继承）并且无法位子元素（opacity：1）的方法来改变子元素的这个属性。

解决办法：

                    1.用css3 的rgba属性：background-color:rgba(0,0,0,.5)。

                       2.父元素div（设置为相对定位），子元素div1（设置为绝对定位）背景正常加透明度即可，子元素div2（设置为绝对定位），层级关系高于div1

eg：.content {
    position:relative;
    z-index:5;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
   .background {
    background-color: #37a7d7;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1;
    /*兼容IE7、8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:.5;
}

 

    <div class="container">

        <div class="background"></div>

        <div class="content">
            <p>我是class为content的DIV</p>
            <p>我的背景是class为background的背景</p>
        </div>
    </div>