我想在也支持响应式网站的图像中制作文本叠加

Question

下面是HTML代码。我正在使用引导程序 3 进行设计。我将文本放在图像上，但由于它没有保持在正确的位置而出现问题。在调整浏览器大小时，带有背景的文本的位置会错位。所以请帮助我如何解决这个问题。

<div class = "col-xs-12">
<h3 class="cen-align">STORIES OF CHANGE</h3>
<img src="img/rig_img1.jpg" class="center-block img-responsive image-wrapper" />
<p class="img-ps">Advocating Land Rights for BPL Dalit communities in Alampur village...</p>
</div>

CSS代码：

.img-ps{
font-size:13px;
text-align:center;
position: absolute; 
left:66px; 
top:143px; 
padding: 10px; 
background-color:rgba(0,0,0,0.3);
width: 248px; 
color: #FFF; 
margin: 0px;
}
.image-wrapper{
position: relative; 
width: 250px;
}

Answer 1

我不知道

你到底需要什么，但这对你有用吗？

.HTML：

 <div class = "col-xs-12">
    <h3 class="cen-align">STORIES OF CHANGE</h3>
    <img src="img/rig_img1.jpg" class="image">
    <p>Advocating Land Rights for BPL Dalit communities in Alampur village...</p>
 </div>

.CSS：

 .image { 
   position: relative; 
}
p { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%;
   color: white;
}