Подписи для картинок на HTML и CSS

В вёрстке часто приходится работать с картинками. Не в контексте создания с их помощью оформления, а именно картинками как картинками. И дизайнеры иногда очень любят придумывать различные способы оформления подписей к картинкам, вёрстка которых может вызвать затруднения у начинающих. В этой заметке я постараюсь раскрыть один из способов вёрстки подписей для изображений.

Итак, мы хотим увидеть результат примерно как на рисунке 1.

img-title

Рисунок 1. Исходная картинка

Для этого нам понадобиться написать вот такой html-код:

<div>
  <img src="/i.jpg" width="250" height="398" alt="Картинка" />
  <span>Все дальнейшее далеко выходит за рамки текущего исследования</span>
</div>

Пока всё просто: оборачиваем картинку в блок, ниже картинки внутри span вписываем подпись для неё. Сам приём основан на добавлении к элементу, содержащему подпись (в данном случае — к span), абсолютного позиционирования и расположения внизу, что позволит тексту в нём растягивать элемент не вниз, а вверх. Но чтобы все элементы вели себя правильно, нужно будет прописать некоторые стили и для картинки, и для блока-обёртки. Итак, по порядку.

Так как span у нас будет абсолютным, к обёртке нужно добавить position: relative, а также указать ширину.

div {
  position: relative;
  width: 250px;
}

Картинку следует принудительно сделать блочной, чтобы убрать ненужные нам отступы снизу и удалить рамку в IE.

img {
  display: block;
  border: none;
}

Но больше всего стилей мы пропишем для span:

мы делаем его блоком
задаём padding чтобы текст не прилипал к краям
задаём принудительную ширину (не забудьте уменьшить её на ширину padding'a)
делаем абсолютное позиционирование и «приклеиваем» к низу блока-обёртки, который является визуально и самым низом картинки
далее задаём цвет фона, его прозрачность (согласно статье 12 простых и полезных приёмов), оформляем текст подписи по вкусу

span {
  display: block;
  padding: 15px;
  width: 220px;
  position: absolute;
  bottom: 0px;
  background: #000;
  opacity: 0.70;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  -khtml-opacity: 0.70;
  -moz-opacity: 0.70;
  text-align: center;
  color: #fff;
  font: 11px/16px Tahoma, Geneva, sans-serif;
}

Таким образом, самое главное — это первые пять свойств. Остальное оформление вы можете изменить как угодно на ваше усмотрение. В итоге получилась такая страничка:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Подписи для картинок на CSS</title>
</head>
<body>
<style type="text/css">
div {
  position: relative;
  width: 250px;
}
img {
  display: block;
}
span {
  display: block;
  padding: 15px;
  width: 220px;
  position: absolute;
  bottom: 0px;
  background: #000;
  opacity: 0.70;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  -khtml-opacity: 0.70;
  -moz-opacity: 0.70;
  text-align: center;
  color: #fff;
  font: 11px/16px Tahoma, Geneva, sans-serif;
}
</style>
<div>
  <img src="/i.jpg" width="250" height="398" alt="Картинка" />
  <span>Все дальнейшее далеко выходит за рамки текущего исследования</span>
</div>
</body>
</html>

Обратите внимание Ширины блока-обёртки, картинки и блока с названием с учётом padding должны быть равными!

Интересная статья? Поделись ей с другими: