如何制作覆盖字幕的液体居中图像？
|
我正在尝试使用CSS来显示以字幕叠加层为中心的图像，并在浏览器窗口太小（缩小以致无法容纳）时显示出流畅的显示能力。
我目前的最佳尝试类似于以下HTML（使用Google的徽标作为示例图片）
<div align=\"center\">
<div class=\"container\">
<img src=\"http://www.google.fr/images/logos/ps_logo2.png\" class=\"picture\" />
<h3 class=\"caption\">Image Caption</h3>
</div>
</div>
.container {
position : relative;
max-width : 364px;
}
.picture {
border-radius:0.5em;
box-shadow: 0px 0px 0.5em #000000;
max-width:364px;
}
.caption {
position:absolute;
padding:0.25em;
top:1em; left:0; right:0;
color:black;
background-color:rgba(0,0,0,0.2);
text-align:center;
}
没有找到相关结果
已邀请:
1 个回复
貉骂
<div class=\"container\"> <img src=\"http://www.google.fr/images/logos/ps_logo2.png\" class=\"picture\" /> <h3 class=\"caption\">Image Caption</h3> </div>.container { position : relative; max-width : 364px; margin:0 auto; } .picture { border-radius:0.5em; box-shadow: 0px 0px 0.5em #000000; width:100%; } .caption { position:absolute; padding:0.25em; top:1em; left:0; right:0; color:black; background-color:rgba(0,0,0,0.2); text-align:center; }，请使用CSS进行对齐和定位。