将框和文本放在图像z-index上

Question

我想在此框中放置一个框和文字在图像上。

我已设法在图片上放置文字，如下面的屏幕截图所示：

使用此代码：

#wrap {
    position:relative; 
    width: 200px;  
    height: 145px;
    border: 1px solid grey
}



#text {
z-index:100;
    position:absolute;    
    color:black;
    font-size:20px;
    font-weight:bold;
    left:10px;
    top:115px;
}

然后调用这个函数：

<div id="wrap">
    <img src="/wp-content/uploads/2014/03/brandslang.png"/>
    <div id="text">Brand</div>
</div>

我想在文字周围添加一个方框，如下所示：

我当然要将文字颜色改为白色等等。我的想法是让文字框变黑，然后改变框的不透明度，让它看起来像那样。

但是我不确定如何添加此框，我尝试将#text的背景设置为黑色，但是它没有效果，因为它最终只在文本周围绘制一个框。 此外，我不确定如何使用该选项更改文本位置。

所以这就是我希望你们能帮助我的地方！ ：）

Answer 1

由于你使用绝对位置，你可以尝试这样的事情：

#text {
    z-index: 100;
    position: absolute;    
    color: white;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.4);
}

示例：http://jsfiddle.net/hQc3F/

Answer 2

首先，我将所有div id更改为类，以便您可以在整个页面中重复使用代码并使其更加灵活。

@srekoble的回答非常好，但我可能会这样做。

CSS：

.wrap {
    position:relative; 
    width: 200px;  
    height: 145px;
    border: 1px solid grey;
}
.backbox {
    z-index:100;
    position:absolute;
    min-height: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.7);    
}
.text {
    z-index:999;
    color:#fff;
    font-size:20px;
    font-weight:bold;
}

HTML：

<div id="wrap">
    <img src="/wp-content/uploads/2014/03/brandslang.png"/>
    <div id="text">Brand</div>
</div>

http://jsfiddle.net/JtLbB/

此示例允许您以不同方式设置文本和背景框的样式，并且通过使用CSS类，您可以将其应用于整个站点中的更多框。 ID应该始终是唯一的。