Html 使用引导中的Div在图像上显示文本

我尝试用下面的代码在图像上显示文本，如下所示

但结果是这样的：

---

请帮帮我，我错过了什么？因为我希望输出像上面显示的第一幅图像一样。

您必须将类添加到标题h2标记中，并向其添加以下样式。 添加以下类

 <h2 class="header">Restaurant Stowaway Devours $800 of Roast Goose and Wine</h2>

h2.header {
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

餐馆偷渡者吞食了800美元的烤鹅和葡萄酒
h2.1头{
底部：0；
位置：绝对位置；
文本对齐：居中；
宽度：100%；
}

创建一个以该图像为背景的div元素，然后在另一个div框中添加文本。尝试调整宽度并将其移到底部。

body {
  text-align: center;
}

.wrapper {
    display: inline-block;
    margin-top: 25px;
    position: relative;  
}

.wrapper img {
   display: block;
   max-width:100%;
}

.wrapper .overlay {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.25);
    color:white;
}

 <h2 class="header">Restaurant Stowaway Devours $800 of Roast Goose and Wine</h2>

h2.header {
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}