Как отображать текст над изображением в Bootstrap 3.1

Я хотел бы добавить текст, который отображается над изображением.

По существу, это выглядит как мой код:

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

Если кто-то может помочь, это будет здорово:)

Ответ 1

Я могу предложить способ обойти вопрос: вы можете использовать карусель с одним элементом, потому что вы можете вставлять текст на изображения карусели благодаря титрам:

<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>

Ответ 2

Вам нужно будет вставить дополнительный 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-index:

.imageAndText {position: relative;} 
.imageAndText .col {position: absolute; z-index: 1; top: 0; left: 0;}

Здесь jsFiddle, иллюстрирующий: http://jsfiddle.net/sX982/

Ответ 3

Я не думаю, что это возможно, используя классы начальной загрузки. Вы можете просто сделать что-то вроде этого, добавив 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;
}

from: Bootstrap 3: Наложение текста на изображение