我尝试使用下面的代码在图像上显示文字,如下所示;
<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;
}
请帮助我,我错过了什么?因为我希望输出就像我上面显示的第一个图像。
答案 0 :(得分:2)
您必须在标题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%;
}