html - 带有白色文本的不透明背景

Question

尝试获得不透明的黑色背景和顶部的白色文本。

我遵循了此处的答案，但它对我不起作用。

需要它兼容 IE8。

http://jsfiddle.net/0khfo2cf/

#carousel .image_text{
    position: absolute;
    margin:0 auto;
    text-align:center;
    bottom:55px;
    left:0;
    right:0;
    width:700px;
    min-height:0px;

}
#carousel .image_text .text_background{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color: rgb(0,0,0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  
    opacity: 0.7;


}
#carousel .image_text span{
    display:block;
    color:#FFF; 
    font-family: 'open_sansbold';
    font-size: 300%;
    text-transform: uppercase;
    overflow:hidden;
}
#carousel .image_text span p{    

    margin:0;

}

HTML

     <div class="image_text">
        <span>
           <p>This is text2</p>
        </span>
        <div class="text_background"></div>
     </div>

http://jsfiddle.net/0khfo2cf/

Answer 1

您需要您的文字高于背景

设置它相对位置，并给它一个z-index

#carousel .image_text span{
    display:block;
    color:#FFF; 
    font-family: 'open_sansbold';
    font-size: 300%;
    text-transform: uppercase;
    overflow:hidden;
    position: relative;
    z-index: 10;
}

fiddle