Html 如何在 Bootstrap 3.1 中在图像上显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22122111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to display text over an image in Bootstrap 3.1
提问by user2231397
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.
我无法将“这是一个测试”添加到图像的建议部分。
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
我想使用 bootstrap.min.css 的参数来保持一切一致。此外，由于这将是一个响应式设计网站，我希望文本对图像具有响应性，以便它不会失去其位置
If anyone could help, that would be great :)
如果有人可以提供帮助，那就太好了:)
回答by SALAMAT Med Ayman
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>
回答by Victoria Ruiz
You will need to paste additional css to give us an idea of what you're dealing with exactly, but here's my 2 cents anyway:
您将需要粘贴额外的 css 以让我们了解您正在处理的内容，但无论如何这是我的 2 美分：
1) Start by placing the image and the text in something that will contain them both:
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>
(Careful, your original code has an extra )
（小心，你的原始代码有一个额外的）
2) Add absolute positioning + z-index:
2）添加绝对定位+z-index：
.imageAndText {position: relative;}
.imageAndText .col {position: absolute; z-index: 1; top: 0; left: 0;}
Here's a jsFiddle illustrating: http://jsfiddle.net/sX982/
这是一个 jsFiddle 说明：http: //jsfiddle.net/sX982/
回答by Allan Stepps
I don't think this is possible using bootstrap classes. You can just do something like this by adding thumbnailto the image and thumbnail_legendto the nextdiv.
我认为使用引导类是不可能的。您可以通过添加只是做这样的事情thumbnail的形象和thumbnail_legend对未来股利。
.thumbnail_legend {
background: none repeat scroll 0 0 #FFFFFF;
opacity: 0.5;
top:0;
left:0;
position: absolute;
}
.thumbnail {
position:relative;
}
