Размещаем текст поверх изображения, используя css

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

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

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

Суть представленного способа в том, что мы делаем 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 (справа)

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

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

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

Код 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 
}

Комментарии  

# Дмитрий 17.03.2017 17:46
А в какое место файла стилей необходимо размещать приведенный код CSS?
Ответить
# babajka38 21.03.2017 09:11
Не имеет значения (если вы конечно не используете у себя в css название класса .container)
Ответить

Добавить комментарий


Защитный код
Обновить