html - 在 Bootstrap 中使用 Div 在图像上显示文本

Question

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

<div class="wrapper">
<img src="https://cdn0.vox-   cdn.com/thumbor/qLH7593e3D2SSSIdkwgBWdYhjjk=/289x0:802x684/400x533/filters:forma t(webp)/cdn0.vox-cdn.com/uploads/chorus_image/image/47859707/6621139883_e6be6a217a_b__1_.0.0.jpg"  alt="" />
 <div class="overlay">
    <h2>Restaurant Stowaway Devours $800 of Roast Goose and Wine</h2>

 </div>
 </div>

CSS

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

但是结果是这样的:

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

Answer 1

您必须将类添加到您的标题 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%;
}