Некоторые находят неправильный выход: рисуют текст на картинке в графических редакторах, после чего размещают изображение с текстом в html документах. Но что делать, если текст надо заменить? Опять перерисовывать картинку? Есть более простые решения.

В результате получаем:

Белым снегом все покрыло: И деревья и дома, Свищет ветер легкокрылый: «Здравствуй, зимушка-зима!»

Суть представленного способа в том, что мы делаем div-контейнер, который будет содержать в себе картинку и текст. При этом текст мы будем позиционировать относительно левого нижнего угла контейнера.

Код html:

<div class="container">
    <img src="/images/article/21/bg.jpg" alt="background-image">
    <div>Белым снегом все покрыло:
         И деревья и дома,
         Свищет ветер легкокрылый:
         «Здравствуй, зимушка-зима!»
    </div>
</div>

Код css:

.container {
    display:inline-block;   
    position:relative;
}
.container div { 
    display: inline-block; 
    position: absolute; 
    bottom: 10px; left: 0px; 
    background-color: rgba(0,0,0,.4); 
    padding: 5px 5px 5px 10px;
    color: white
}

container:

• display: inline-block - нам нужен, чтобы контейнер не растягивался по ширине на всю страницу.
• position: relative - заставляет все вложенные блоки с position: absolute вести отсчёт координат своего положения не от окна браузера, а от блока .container

container div:

• display: inline-block - для того, чтобы стили, относящиеся к блочным элементам, могли быть применены к нашему тексту.
• position: absolute - для размещения блок с помощью конкретных координат: bottom, left - отступы снизу и слева (координаты) возможно вместо них использовать top (сверху) и right (справа)

Показываем описание при наведении на картинку

Показанный выше способ можно использовать для отображение текста при наведении картинку мышкой (может пригодиться для описания товаров в интернет-магазине).

Белым снегом все покрыло: И деревья и дома, Свищет ветер легкокрылый: «Здравствуй, зимушка-зима!»

Код css будет выглядеть следующим образом (код html не изменился):

.container {
    display:inline-block;   
    position:relative;
}
.container div { 
    display: none;
    position: absolute; 
    bottom: 10px; left: 0px; 
    background-color: rgba(0,0,0,.4); 
    padding: 5px 5px 5px 10px;
    color: white
}
.container:hover div {
    display: block 
}