Как в html сделать подпись под картинкой

Как в html сделать подпись под картинкой

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 9.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Добавить под фотографией подпись так, чтобы они одновременно обтекались близлежащим текстом.

Решение

Подпись под фотографией обычно применяется для комментирования изображения и краткого его описания. Хотя добавить подпись можно с помощью обычного абзаца, этот способ не работает, как только фотографию необходимо расположить по правому или левому краю веб-страницы. Подпись должна быть неразрывна с изображением, независимо от способа его расположения на странице.

Чтобы связать фотографию и подпись к ней воедино, их следует поместить в один блок и присвоить ему имя класса, к которому будут применяться стилевые параметры. Такой блок можно выравнивать по правому или левому краю, добавляя стилевое свойство float со значением right или left , а также задавать цвет фона и параметры рамки (пример 1).

Пример 1. Подпись под фотографией

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1. Для блока используется тег , а для подписи к изображению тег . Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.

Рис. 1. Фотография с подписью, выровненная по правому краю страницы

Поскольку в нашем случае ширина блока с фотографией не задавалась, то она будет определяться автоматически исходя из размера изображения и подписи к нему. Как видно на рис. 1 такой подход приводит к тому, что отступы слева и справа от фотографии получаются разными. Исправляется данная особенность добавлением к стилям блока свойства width с фиксированным значением.

Фиксированные подписи к изображениям

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

Читайте также:  Попытка входа в ваш аккаунт

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

Синтаксис(разметка html) во всех примерах будет примерно одинаков, тег , который содержит описание для тега , должен быть первым или последним элементом в группе, всё очень просто.
Так:

Подпись к изображению.

Подпись к изображению.

Внешний вид и расположение подписей будем формировать непосредственно в таблице стилей CSS, предварительно связав все элементы со стилями через определённые классы. Например, я сделал изображения в блоке «резиновыми», используя процентные значения ширины картинки width: 100%; . Как сделать картинки адаптивными, рассказывал подробно в статье Адаптивные изображения с помощью CSS, кому интересно, можете освежить память.
Во всех случаях базовому контейнеру определяем относительное позиционирование position: relative; , а подписям (элемент ), в вариантах с наложением, определяем абсолютное позиционирование position: absolute; .

1. Подпись размещается вверху, перед изображением

Вариант когда подпись к картинке выводится вне тела картинки, первым элементом в группе, т.е. перед изображением. Каких-то дополнительных стилей, этот вариант не требует, опционально вы можете сменить фон, добавить рамку или внешнюю тень базовому контейнеру, изменить размер и семейство шрифта, всё дело вкуса.

Ваш браузер не поддерживает фреймы.

Подпись размещается вверху перед изображением.

/* группируем картинки */ figure < margin: 0px; >/* position: relative; обязательно, остальное по вкусу */ figure.ink-image < position: relative; border: 1px solid #555; >/* изображения резиновые */ figure.ink-image > img < border: 0px none; width: 100%; vertical-align: top; >/* формируем подписи к картинкам */ figure.ink-image > figcaption

Читайте также:  Set wps ap mode

2. Подпись размещается внизу под изображением

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

Ваш браузер не поддерживает фреймы.

Подпись размещается внизу после изображения.

/* группируем картинки */ figure < margin: 0px; >/* position: relative; обязательно, остальное по вкусу */ figure.ink-image < position: relative; border: 1px solid #555; >/* изображения резиновые */ figure.ink-image > img < border: 0px none; width: 100%; vertical-align: top; >/* формируем подписи к картинкам */ figure.ink-image > figcaption

3. Подпись поверх изображения, прижата к верхнему краю

В последнее время, очень часто используется вывод подписей непосредственно на теле изображения, визуальный эффект наложения, с полупрозрачным фоном, или же совсем без фона. В данном примере демонстрируется подпись расположенная поверх картинки, прижатая к верхнему краю на слегка прозрачном фоне. Стили для этого вида подписей выделены в отдельный класс , цвет фона определяется в свойстве background в формате rgba , изменяя значения альфа-канала от до 1, вы легко можете задать степень прозрачности, по умолчанию выставил промежуточное значение 0.5 — полупрозрачность элемента.

Ваш браузер не поддерживает фреймы.

Подпись поверх изображения, сверху, слегка прозрачный фон.

/* группируем картинки */ figure < margin: 0px; >/* position: relative; обязательно, остальное по вкусу */ figure.ink-image < position: relative; border: 1px solid #555; >/* изображения резиновые */ figure.ink-image > img < border: 0px none; width: 100%; vertical-align: top; >/* формируем подписи к картинкам */ figure.ink-image > figcaption < padding: 1em; background: none repeat scroll 0% 0% #FFF; line-height: 1.3; font-family: ‘Roboto’, sans-serif; font-weight: 400; >/* подпись поверх картинки сверху */ figcaption.over-top

Читайте также:  Final fantasy type 0 персонажи

4. Подпись поверх изображения, прижата к нижнему краю

Всё тоже самое что и в предыдущем примере, разница только в расположении подписи. В этом варианте подпись прижата к нижнему краю изображения, работает свойство bottom: 0px; при абсолютном позиционировании position: absolute; .

В данной статье рассмотрим способы размещения текста под картинкой в html документе. Существует несколько разных вариантов как выполнить данную задачу.

Начнем с самого правильного и нового.

В html 5 добавлен новый тег . Данный тег используется для разметки независимого блока с демонстрационными материалами будь то, графики, изображения, куски кода и т.д.

Такие материалы сопровождаются подписями — комментариями разъясняющими информацию на изображении. Для этих целей используется тег который размещается внутри в начале или в конце.

Посмотрим на новые теги в действии.

Внутри тега мы разместили картинку и подпись. Теперь применим CSS стили.

В итоге получаем картинку с размещенной подписью под ней.

текст под картинкой

Полный пример кода страницы с картинкой.

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

Рассмотрим еще один способ добавления подписи под изображение с помощью html таблиц.

Создадим простую таблицу с двумя строками содержащих 1 ячейку.

Применим стили для текста и изображения.

текст под картинкой

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

Надеюсь , что статья была Вам полезна. До новых встреч!

Ссылка на основную публикацию
Adblock detector