我想在图像上添加显示文字。
我的代码基本上是这样的:
<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>
我无法将 "this is a test" 添加到图片的建议部分。
我希望使用 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 分钱:
<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>
(小心,你的原始代码多了一个
.imageAndText {position: relative;}
.imageAndText .col {position: absolute; z-index: 1; top: 0; left: 0;}
以下是 jsFiddle 说明:
我认为使用 bootstrap 类无法做到这一点。您只需在图片中添加 thumbnail
并在 next div 中添加 thumbnail_legend
即可。
.thumbnail_legend {
background: none repeat scroll 0 0 #FFFFFF;
opacity: 0.5;
top:0;
left:0;
position: absolute;
}
.thumbnail {
position:relative;
}
来自:https://stackoverflow.com/questions/18631530/text-overlay-on-image