Question

尝试在顶部显示不透明度和白色文字的黑色背景。

我在这里听了一个答案，但它对我不起作用。

需要兼容IE8。

#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

与白色文本的不透明背景

1 个答案: