我想添加显示在图像上的文本。
本质上,我的代码是这样的:
<div class="ek-background">
<div class="row">
<section id="container">
<div class="container col-sm-4 col-sm-offset-2">
<div class="pull-right">
<h1>TITLE HERE</h1>
<h2>Let us build your preview for free</h2>
</div>
<img src="img/img/flow-1.png" class="align-center img-responsive">
<div class="col">
<div class="col-sm-4">
<p>this is a test</p>
</div>
</div>
</div>
我无法将"这是一个测试"放在图像的建议部分。
我想使用 bootstrap.min 的参数.css来保持一切一致。另外,由于这将是一个响应式设计网站,我希望文本与图像一起响应,这样它就不会失去其位置
如果有人能帮忙,那将是一件好事:)
我可以建议一种解决问题的方法:您可以将轮播与单个项目一起使用,因为借助标题,您可以在轮播图像上插入文本:
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="img/yourimage.png" alt="" class="img-responsive">
<div class="carousel-caption">
Insert your text here !
</div>
</div>
</div>
</div>
您需要粘贴额外的 css 才能让我们了解您正在处理的确切内容,但无论如何这是我的 2 美分:
1)首先将图像和文本放在包含它们的内容中:
<div class="imageAndText">
<img src="img/img/flow-1.png" class="align-center img-responsive">
<div class="col">
<div class="col-sm-4">
<p>this is a test</p>
</div>
</div>
</div>
(小心,你的原始代码有一个额外的)
2)添加绝对定位+z指数:
.imageAndText {position: relative;}
.imageAndText .col {position: absolute; z-index: 1; top: 0; left: 0;}
这是一个jsFiddle说明:http://jsfiddle.net/sX982/
我认为使用引导类是不可能的。您可以通过向图像添加thumbnail
并将thumbnail_legend
添加到下一个div来执行此类操作。
.thumbnail_legend {
background: none repeat scroll 0 0 #FFFFFF;
opacity: 0.5;
top:0;
left:0;
position: absolute;
}
.thumbnail {
position:relative;
}
来自:引导程序 3:图像上的文本叠加