Особенности взаимодействия HTML изображения и текста
Посмотрим, как разместить текст слева или справа изображения.
В предыдущем уроке мы рассмотрели метод вывода HTML изображения с расширением .jpg на web-страницу и то, как установить дополнительное расстояние между ним, и текстом. Продолжим наше знакомство с тегом <img /> и особенностями его взаимодействия с элементами текста.
Навигация по странице
- Текст вверху, внизу, по центру изображения на HTML странице сайта
- HTML изображение слева – текст справа
- HTML изображение справа – текст слева
Текст вверху, внизу, по центру изображения
Пример:
<html>
|
Результат:
Посмотреть в новом окне: HTML текст вверху, РІРЅРёР·Сѓ, РїРѕ центру изображения
Атрибуты и значения
- align="top" – выравнивает изображение и текст по верху.
- align="middle" – выравнивает изображение и текст по центру, по вертикали.
- align="bottom" – выравнивает изображение и текст по низу.
Напомню, что для web применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif).
Обратите внимание на способ подгрузки изображения: ../images/2121.png. Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой.
В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самого изображения.
HTML изображение слева – текст справа
Пример:
<html> |
Результат:
Посмотреть в новом окне: HTML изображение обтекает текст слева
HTML изображение справа – текст слева
Пример:
<html> |
Результат:
Посмотреть в новом окне: HTML изображение обтекает текст справа
ab-w.net
Как сделать надпись под картинкой
Кроме содержания атрибутов alt и title при поиске по картинкам используются тексты, находящиеся в непосредственной близости от изображения. Часто это выглядит как:
<!-- HTML5, подходит для резинового дизайна --> <style> figure.img { margin: 0; text-align: center; } figure.img img { /* изображение уменьшается пропорционально экрану браузера */ max-width: 100%; height: auto; } figure.img figcaption { /* стиль описания */ padding: 0 1%; font: italic 90% Georgia,serif; } </style> <figure class="img"> <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302"> <figcaption>Когда-нибудь котёнок выберется из лужи</figcaption> </figure>
Автоматическая нумерация картинок
К стилю выше дописать [доп.информация про счётчики CSS]:
body { counter-reset: figures; } figure.img figcaption { counter-increment: figures; } figure.img figcaption:before { content: 'Рис.' counter(figures) ' '; }
Изображение с подписью в рамке
Общий CSS стиль:
<style> figure.img { max-width: 100%; margin: 0 auto; box-shadow: 0 0 0 5px #fff, 0 0 4px 5px; /* рамка (она же отступ и тень) блока */ } figure.textizo { width: fit-content; /* ширина блока (рисунок+описание) = ширине описания или фото, в зависимости от того, чьё значение больше; нужен -moz- и -webkit- */ } figure.izo { width: min-content; /* ширина блока (рисунок+описание) = ширине изображения; нужен -moz- и -webkit- */ } figure.img img { display: block; max-width: 100%; height: auto; margin: 0 auto; } figure.img figcaption { max-width: 100%; padding: 0 1%; font: italic 90% Georgia,serif; } </style>
Текст длиннее изображения. Если картинка располагается по центру, то хочется использовать всё пространство родительского блока.
<figure class="img textizo"> <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302"> <figcaption>Когда-нибудь котёнок выберется из лужи</figcaption> </figure>
Когда нужно чтобы ширина контейнера была не больше ширины картинки (для Google Chrome см. код ниже, для него нужно обязательно указывать width для figcaption ?!).
<figure class="img izo"> <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302"> <figcaption>Когда-нибудь котёнок выберется из лужи</figcaption> </figure>
Если изображение узкое и маленькое и обтекается слева или справа, а текст длинный, то следует ограничить ширину описания.
<figure class="img izo"> <img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147"/> <figcaption style="width: 300px;">Длинное, очень длинное, длинное-предлинное описание</figcaption> </figure>
HTML подпись под картинкой, появляющаяся после наведения курсора мышки
К CSS выше добавить:
figure.hover { position: relative; } figure.hover figcaption { position: absolute; left: 0; top: calc(100% + 5px); width: available; /* 100% минус горизонтальные margin, border и padding; нужен -moz- и -webkit- */ visibility: hidden; background: #fff; box-shadow: 0 0 0 5px #fff, -5px 0 4px, 5px 0 4px, 0 5px 4px; } figure.hover:hover figcaption { visibility: visible; }
<figure class="img izo hover"> <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302"> <figcaption style="width: 302px;">Когда-нибудь котёнок выберется из лужи</figcaption> </figure>
Несколько фотографий и одно описание
Про тег figure и figcaption хорошо написано у html5doctor.com: статья 1 (в комментариях тоже можно найти интересные моменты), статья 2, а также следует прочитать первоисточник w3.org. Словом, так тоже будет верно:
<style> figure.img { max-width: 100%; } figure.izo { width: min-content; margin: 0 auto; } figure.tri figure { width: 100%; margin: 0; letter-spacing: 6px; white-space: nowrap; } figure.img img { height: auto; margin: 0 auto; } figure.tri img {.
" src="http://1.bp.blogspot.com/-zieFTVCUOhk/UrLBvVdmQnI/AAAAAAAAEOg/_HXG_LQSpfE/s320/gadkiy-utenok.jpg"> <img alt="гадкий утёнок смотрит в воду, он стал лебедем" src="http://4.bp.blogspot.com/-R4BCZt_KHWY/UrLAiZDDnzI/AAAAAAAAEOQ/U2WFegtrfi8/s00/gadkii-utenok.jpg"> </figure> <figcaption>Когда-нибудь котёнок выберется из лужи. По крайне мере одному уже удалось из гадкого утёнка превратиться в величавую птицу</figcaption> </figure>
shpargalkablog.ru
Каждый день на форумах html новички спрашивают: «Как разместить текст поверх изображения?». Некоторые находят неправильный выход: они рисуют текст на картинке в графических редакторах, после чего размещают изображение с текстом в html документах. Но что делать, если текст надо заменить? Опять перерисовывать картинку? Есть более простые решения.
Используя методы, описанные в уроке, мы можем получить такой результат:
Подготовка
Возьмём картинку
Её размер — 350px × 200px. И этой информации достаточно для того, чтобы приступить к работе.
Теперь попробуем разместить поверх неё текст несколькими способами.
Способ первый: картинка как фон div
Сразу оговорюсь, что этот способ мне самому не нравится из-за примитивного конечного результата, но тем не менее он существует, поэтому я расскажу о нём.
Суть способа заключается в том, что мы берём тег div, задаём ему размеры, совпадающие с размером изображения, и устанавливаем картинку в качестве фона.
Обратите внимание, что размер тега = собственный размер + размер отступов padding. Таким образом, если мы хотим сделать отступ содержимого от края картинки на 20px, то размер самого div нужно указать на эти 20px меньше. То есть: 350-20 = 330 в ширину и 200-20 = 180 в высоту.
<div class="example1">Текст</div>
.example1 { padding-top:20px; width:330px; padding-left:20px; height:180px; background-image:url("/examples/20120821/bg.png"); /*оформление текста*/ color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:40px; }
Результат:
Способ простой по структуре хтмл кода (требуется всего один тег), но зато он не позволяет задать тексту какие-то особые стили. В результате чего может получиться так, что текст будет сложно прочитать. Кроме того, блок жёстко привязан к размерам картинки, а значит, в случае изменения картинки придётся переписывать и css
Способ второй: наложение двух тегов друг на друга
Суть этого способа в том, что мы делаем div-контейнер, который будет содержать в себе картинку и текст. При этом текст мы будем позиционировать относительно левого верхнего угла контейнера.
<div class="example2"> <img src="/examples/20120821/bg.png" class="example_beauty"> <span>Текст</span> </div>
.example2 { display:inline-block; position:relative; } .example2 span { display:inline-block; position:absolute; top:30px; left:0px; /* Оформление текста */ color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:20px; /* Фон */ background-color:rgba(0,0,0,.4); padding:10px 30px; }
.example2:
display:inline-block нам нужен, чтобы контейнер не растягивался по ширине на всю страницу.
position:relative заставляет все вложенные блоки с position:absolute вести отсчёт координат своего положения не от окна браузера, а от блока .example2.
.example2 span:
display:inline-block — для того, чтобы стили, относящиеся к блочным элементам, могли быть применены к нашему тексту.
position:absolute — для вынимания тега из общего потока и дальнейшего его размещения с помощью задачи конкретных координат. top, left — отступы сверху и слева (координаты). возможно вместо них использовать bottom (снизу) и right (справа)
Результат:
Минусом этого способа является то, что нарушается семантика кода, появляется много лишних тегов. Но зато он не привязан к размерам картинки, он позволяет делать фон у текста, делая его более читаемым, да и вообще даёт нам полную свободу в настройке стилей.
Играя с css и структурой тегов можно добиться и такого результата:
Данный результат довольно неплохо подходит для оформления галлерей, витрин интернет-магазинов и прочих сервисов.
Код последнего результата:
<div class="example3"> <img src="/examples/20120821/bg.png" class="example_beauty" /> <div class="example_text"> <h6>Я - заголовок</h6> <span>А я - комментарий к этой прекрасной картинке. Я такой длинный, что занимаю несколько строчек.</span> </div> </div>
.example3 { display:inline-block; position:relative; } .example3 .example_text { display:block; position:absolute; left:0; bottom:0; width:100%; box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color:#fff; padding:10px; background-color:rgba(0,0,0,.3); } .example3 h6 { font-family:Arial, Helvetica, sans-serif; font-size:18px; } .example3 span { font-size:12px; }
borpost.ru
От автора: как сделать в html подпись под картинкой? Действительно, как? С первого взгляда все кажется проще некуда, но на деле не каждый может сам додуматься до того, как же все-таки разместить текст ровно под картинкой, ведь она является строчным элементом.
Самый примитивный вариант
Сразу после изображения поставьте тег br и напишите нужный текст. Конечно, он не будет располагается по центру, но зато будет под картинкой, так что его уже можно назвать подписью. Вариант не годится для тех случаев, когда фото располагается в строке не в самом начале, потому что в таком случае по напечатанному тексту непонятно будет, к чему он вообще относится.
Тег br ставить необязательно, можно просто заключить подпись в тег абзаца, тогда текст сам перенесется на следующую строку, так как абзац – блочный элемент.
Ладно, это был самый простой способ, который не всегда подойдет, поэтому предлагаю рассмотреть более правильные.
Соединение изображения и подписи в блок
Все очень просто. Мы поместим картинку и подпись к ней в отдельный блок.
При таком способе вы легко сможете выровнять текст подписи ровно по центру изображения, но при этом нужно ограничить ширину главного контейнера, поставить ее ровно такой, каковой является ширина изображения:
В моем случае это 200 пикселей.
С помощью селектора .frog p вы можете применить дополнительные стили к подписи.
Использование тега figure
Следующее решение является наиболее оптимальным, так как в нем используются теги html5 – figure и figcaption. Они предназначены для группировки каких-либо элементов вместе.
По сути, нам даже практически полностью подходит код предыдущего примера, нужно только заменить div на figure и p на figcaption:
Все остальное актуально и для этого варианта. В частности, само по себе нахождение текста в теге figcaption не выравнивает его по центру. Чтобы выровнять, нужно сделать то же самое, что мы делали в предыдущем способе. Я изменил цвет текста, чтобы подпись в этом примере хоть чем-то отличалась от того, что мы сделали в предыдущем примере.
Как видите, оба способа дают одинаковый результат. Ну и еще 1 вариант вдогонку
В этом примере не нужно помещать картинку и подпись в блок или фигуру, они могут быть просто самостоятельными элементами, но при этом должны стоять друг за другом в разметке.
Теперь стилевой класс я прописал не блоку, а изображению, потому что блока то и нет. Вся загвоздка тут в стилях, вот они:
Значит, мы делаем наше изображение блочным. В принципе, в случае с абзацем это было делать необязательно, но если бы подпись вы бы писали, например, в теге span, то необходимость задать блочное поведение была бы, потому что иначе картинка и подпись находились бы на одной строке.
Ну а чтобы выровнять подпись по центру картинки, мы даем ему ширину картинки и выравнивание текста по центру. Заметьте, какой селектор я использовал. Такие селекторы называются соседними. Например: .frog + p – будет выбран абзац, который лежит в html-разметке сразу за элементом с классом frog.
Результат аналогичен предыдущим способам, даже скриншот не буду показывать. Что ж, это все способы сделать в html подпись под изображением, которые я хотел вам показать. Дело то на самом деле очень мелочное, поэтому особо над его решением нет смысла задумываться, просто выбирайте любой способ и делайте.
webformyself.com
| 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. Подпись под фотографией
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подрисуночная подпись</title> <style> .sign { float: right; /* Выравнивание по правому краю */ border: 1px solid #333; /* Параметры рамки */ padding: 7px; /* Поля внутри блока */ margin: 10px 0 5px 5px; /* Отступы вокруг */ background: #f0f0f0; /* Цвет фона */ } .sign figcaption { margin: 0 auto 5px; /* Отступы вокруг абзаца */ } </style> <!--[if lt IE 9]> <script> document.createElement('figure'); document.createElement('figcaption');</script> <![endif]--> </head> <body> <figure class="sign"> <p><img src="images/helen.jpg" width="150" height="212" alt="Скульптура"></p> <figcaption>Деревянная скульптура</figcaption> </figure> <p>Точность крена эллиптично позволяет пренебречь колебаниями корпуса, хотя этого в любом случае требует нестационарный успокоитель качки, исходя из общих теорем механики. Прецессия гироскопа трудна в описании. Ось собственного вращения, в силу третьего закона Ньютона, не входит своими составляющими, что очевидно, в силы нормальных реакций связей, так же как и курс, даже если не учитывать выбег гироскопа. Однако исследование задачи в более строгой постановке показывает, что ошибка характеризует прецизионный гироскопический маятник, что видно из уравнения кинетической энергии ротора.</p> </body> </html>Результат данного примера показан на рис. 1. Для блока используется тег <figure>, а для подписи к изображению тег <figcaption>. Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.
Рис. 1. Фотография с подписью, выровненная по правому краю страницы
Поскольку в нашем случае ширина блока с фотографией не задавалась, то она будет определяться автоматически исходя из размера изображения и подписи к нему. Как видно на рис. 1 такой подход приводит к тому, что отступы слева и справа от фотографии получаются разными. Исправляется данная особенность добавлением к стилям блока свойства width с фиксированным значением.
htmlbook.ru
Код 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 } itzx.ru
В данной статье рассмотрим способы размещения текста под картинкой в html документе. Существует несколько разных вариантов как выполнить данную задачу.
Начнем с самого правильного и нового.
В html 5 добавлен новый тег <figure>. Данный тег используется для разметки независимого блока с демонстрационными материалами будь то, графики, изображения, куски кода и т.д.
Такие материалы сопровождаются подписями — комментариями разъясняющими информацию на изображении. Для этих целей используется тег <figcaption> который размещается внутри <figure> в начале или в конце.
Посмотрим на новые теги в действии.
<figure class="image"> <img src="up.png"> <figcaption>текст под картинкой</figcaption> </figure>
Внутри тега <figure> мы разместили картинку и подпись. Теперь применим CSS стили.
figure{ position: relative; width: 300px; margin: 20px auto; border-radius: 5px; box-shadow: 0 0 5px #999999; } .image figcaption{ padding: 15px 5%; text-align: center; } /*если картинка больше чем 300px, то стоит добавить еще и эти стили*/ figure img{ width: 300px; }
В итоге получаем картинку с размещенной подписью под ней.
текст под картинкой
Полный пример кода страницы с картинкой.
<html> <body> <head> <style> figure{ position: relative; width: 300px; margin: 20px auto; border-radius: 5px; box-shadow: 0 0 5px #999999; } figure img{ width: 300px; } .image figcaption{ padding: 15px 5%; text-align: center; } </style> </head> <figure class="image"> <img src="3.jpg"> <figcaption>текст под картинкой</figcaption> </figure> </body> </html>
Переместив тег с описанием над картинкой, мы получим подпись над изображение.
Рассмотрим еще один способ добавления подписи под изображение с помощью html таблиц.
Создадим простую таблицу с двумя строками содержащих 1 ячейку.
<table> <tr><td><img src="kotik.png"></td></tr> <tr><td>текст под картинкой</td></tr> </table>
Применим стили для текста и изображения.
td{ text-align: center; // выравнивание текста по центру } td img{ width: 300px; // ширина картинки в ячейке }
|
| текст под картинкой |
Данный способ так же имеет право на существование и даже много где используется, однако лучше использовать первый способ с <figure> и <figcaption>
Надеюсь , что статья была Вам полезна. До новых встреч!
goodweb.me
У меня недавно стал вопрос, как сделать текст поверх картинки. Тогда я мог с уверенностью сказать, что так сделать нельзя. И конечно же оказался неправ. Это реально сделать, причем не затрачивая на это много усилий! Потому что это самое простое что можно сделать…
И так, для начала создадим саму картинку.
<img src="url images" />
Есть картинка, поверха которой нужно сделать текст. Мы сделаем это с помощью «position». Но для начала, что оно из себя представляет.
Position — Устанавливает способ позиционирования, относительно родителя.
- position: absolute; — задает абсолютное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают абсолютные координаты элемента страницы относительно родителя.
- position: relative; — задает относительное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают смещение координат элемента страницы от точки, в которой он был отображен, будь атрибут position установлен в static.
- position: static; — (значение по умолчанию) задает статическое позиционирование, при котором элемент страницы отображается внутри общего «потока» текста, т.е. не свободно. Значения атрибутов bottom, left, right и top при этом не принимаются Web-обозревателем во внимание.
- Хм… Если вы делаете только одно изображение на всю страницу, то выгодно будет пользоваться absolute, так как он позволит выбрать положение по всему экрану.
- А если вам нужно будет сделать маленькую картинку в нутри тега <div> или в таблице, то лучше воспользоваться relative.
Мне нужно было сделать так как во втором примере. Делаем текст, который в дальнейшем будет находится на картинке. Вот пример:
<div width="10%"><!-- Див, в ктором находится наш текст и картинка --><br />
<img src="logo.jpg"><br />
<div>Текст поверх картинки</div><br />
</div>
После этого кода получается текст ниже картинки. Чтобы он стал на картинке, задаем ему position:relative;
<div width="100%"><br />
<img src="logo.jpg"><br />
<div style="position:relative;bottom:100px;">Текст поверх картинки</div><br />
</div><br />
bottom:100px; — показывает настройки расположения текста. Настраивайте под свой вкус ;).
Ну вот и все… Надеюсь полезен был урок!
С уважением, Vasilenko Ivan!
bitby.net