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

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索引

#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;
}

小提琴