Html 将框和文本放置在图像z索引上

我想在图像上放置一个框和框内的文本

我已成功地将文本放置在图像上，如下面的屏幕截图所示：

通过使用此代码：

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

烙印

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

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

我当然要把文本颜色改成白色等等，我的想法是把文本框变成黑色，然后改变不透明度，让它像那样透明

但是我不知道如何添加这个框，我尝试将#文本的背景设置为黑色，但是效果不太好，因为它只在文本周围画了一个框。 此外，我也不确定如何使用该选项更改文本位置

---

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

由于您使用的是绝对位置，您可以尝试以下方法：

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

---

例如：

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

@斯雷科布尔的回答很好，但我可能会这样做

CSS:

HTML:

烙印

---

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

太棒了！非常感谢你！非常感谢！：）

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