如何在Bootstrap 3.1中显示图像上的文本 [英] how to display text over an image in Bootstrap 3.1
问题描述
我想添加显示在图片上的文字。
I would like to add text which displays over an image.
基本上,这是我的代码:
Essentially, this what my code looks like:
<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>
我无法设法得到这是一个测试到图像的建议部分。
I cannot manage to get "this is a test" onto the proposed section of the image.
我想使用bootstrap.min.css的参数来保持一致。此外,由于这将是一个响应式设计网站,我想要的文本是响应与图像,以便它不失去其位置
I would like to use the parameters of bootstrap.min.css to keep everything consistent. Also, since this will be a responsive design website, I am wanting the text to be responsive with the image so that it does not lose its position
如果任何人可以帮助,这将是巨大的:)
If anyone could help, that would be great :)
推荐答案
我可以建议一个方法来解决这个问题:你可以使用旋转木马与单项目,因为您可以通过字幕插入文字在旋转木马图片上:
I can suggest a way to go around the question: you can use a carousel with a single item, because you can insert text on carousel images thanks to captions:
<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>
这篇关于如何在Bootstrap 3.1中显示图像上的文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!