Как установить текст поверх изображения?

Question

Как я могу добавить текст поверх изображения? Я всегда получаю текстовое изображение? Есть ли какой-либо стиль, чтобы заголовок и дескриптор проходили изображение, а не внизу?

<div class="row"> 
     @foreach (var banner in Model.SportBanners) 
     { 

     <a href="@banner.LinkTo"> 
     <img id="resize" src="@banner.BannerPath" alt="" /> 
     <div class="@banner.ClassTag"> 

     </div> 
     </a> 
     <div class="image" style=""> 
     <h1> 
     @MvcHtmlString.Create(Html.Encode(banner.Title).Replace("-", "<br />")) 
    </h1> 
     <br> 
    <p> @MvcHtmlString.Create(Html.Encode(banner.Description).Replace("-", "<br />"))</p> 
    <br> 
    <br> 
    </div> 
    } 
    </div> 

Answer 1

Вы можете использовать позиционирование.

Установить position: relative содержащего элемент.

Установите position: absolute любого внутреннего элемента, который вы хотите взять под контроль над поведением по умолчанию. Затем top, right, bottom и left позволяют размещать этот элемент везде, где вы хотите, в содержащем div.

Это поможет вам позиционировать вещи на основе вашего HTML, где используются теги img (позволяющие использовать управляемые CMS и т. Д.), Вместо того, чтобы устанавливать их в качестве фоновых изображений, для которых требуются подробные классы или встроенные теги стиля.

Пожалуйста, см. http://jsfiddle.net/5nryk3L6/2/ для упрощенной версии (удаляет базу данных CMS) вашего кода, который достигает этого. Я добавил маркер слева на контейнер, чтобы продемонстрировать, как абсолютные значения позиции относятся к следующему элементу в дереве DOM с установленным положением, поскольку это может быть довольно запутанным.