Я хочу добавить текст, который отображается поверх изображения.
По сути, вот как выглядит мой код:
<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 цента в любом случае:
<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
к изображению и thumbnail_legend
к next div.
.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