css2~背景透明，文字不透明和绝对定位

2017.02.09

背景图透明而文字不透明的问题，要支持ie6、7、8。
bg是黑色背景，要半透明
con是背景里的文字，不能透明

<div class="bg">
    <div class="con">文字</div>
</div>

所以不能用opacity，否则chrome等标准浏览器文字会半透明
使用rgba，保证标准浏览器背景色半透明，这样不会影响文字
使用filter:alpha使ie下背景半透明。

.bg {

    background: rgba(0,0,0,0.7);
    /*opacity: 0.7;*/
    filter:~`"alpha(opacity:70)"`;
    zoom: 1;   

}

新问题是，con在bg里面，会继承alpha，所以需要con的样式里加position:relative，不继承alpha，保证文字不透明。

.con {
    
    position: relative;

}

通常情况下，没有问题了。

但是当bg是轮播图的一部分，需要绝对定位到轮播图顶部时，会给bg设定position:absolute

.bg {

    position: absolute;
    top: 0;

    background: rgba(0,0,0,0.7);
    /*opacity: 0.7;*/
    filter:~`"alpha(opacity:70)"`;
    zoom: 1;   

}

当bg里position: absoulute和filter一起出现时，con里面设定position: relative文字还是会变半透明。
此时需要再套一个div，让position: absolute和filter对不同div生效，就可以解决

<div class="bg-wrapper">
    <div class="bg">
        <div class="con">文字</div>
    </div>
</div>

.bg-wrapper {

    position: absolute;
    top: 0; 

}

.bg {

    background: rgba(0,0,0,0.7);
    /*opacity: 0.7;*/
    filter:~`"alpha(opacity:70)"`;
    zoom: 1;   

}

.con {
    
    position: relative;
}