不透明背景与白色文本

Question

Trying to get a black background with opacity and white text over top.

I followed an answer on here, but it didn't work for me.

Needing it compatible for 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

You need your text to be above the background

Set it to position relative, and give it a 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