Html 我想使文本覆盖在一个图像,也支持响应网站
下面是HTML代码。我正在使用Bootstrap3进行设计。我将文本放置在一个图像上,但问题出现了,因为它没有保持在正确的位置。调整浏览器大小时,文本与背景的位置会错位。所以请帮我解决这个问题Html 我想使文本覆盖在一个图像,也支持响应网站,html,css,twitter-bootstrap-3,bootstrap-modal,Html,Css,Twitter Bootstrap 3,Bootstrap Modal,下面是HTML代码。我正在使用Bootstrap3进行设计。我将文本放置在一个图像上,但问题出现了,因为它没有保持在正确的位置。调整浏览器大小时,文本与背景的位置会错位。所以请帮我解决这个问题 <div class = "col-xs-12"> <h3 class="cen-align">STORIES OF CHANGE</h3> <img src="img/rig_img1.jpg" class="center-block img-responsiv
<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>
我不知道你到底需要什么,但这对你有用吗 HTML:
你能加把小提琴吗?你的问题不清楚。
.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;
}
<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>
.image {
position: relative;
}
p {
position: absolute;
top: 200px;
left: 0;
width: 100%;
color: white;
}