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

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

Схема документа

HTML-разметка

A Movie in the Park:
Kung Fu Panda

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

CSS

Таким образом, мы разместили текст непосредственно поверх изображения. Следующая наша задача сделать фон для текста. Поскольку элемент

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

A Movie in the Park:
Kung Fu Panda

Будем использовать этот span для оформления текста и фона:

H2 span { color: white; font: bold 24px/45px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); /* на случай, если следующая строка не сработает */ background: rgba(0, 0, 0, 0.7); padding: 10px; }

Проблемы

Как видно из рисунка, в конце строки блок текста заканчивается непосредственно после последнего символа в строке, и начинается сразу же по левому краю на следующей строке. Свойство padding для span-а, в данном случае, нам не поможет.

Чтобы решить проблему, необходимо использовать дополнительные span-ы по обе стороны от тега
, в этом случае мы уже сможем воспользоваться padding-ом.

A Movie in the Park:
Kung Fu Panda

Этим новым span-ам мы зададим свойство padding:

H2 span.spacer { padding: 0 5px; }

Что на счёт семантики?

На данном этапе дизайн завершен, но при этом осталась одна проблема. А именно, огромное количество дополнительных элементов HTML добавленных только для дизайна. Я имею в виду span-ы. Чтобы решить эту проблему, воспользуемся jQuery. Для этого удалим все span-ы в разметке, и динамически добавим их:

A Movie in the Park:
Kung Fu Panda

$(function() { $("h2").wrapInner(""); $("h2 br").before("") .after(""); });

Влад Мержевич

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

Рисунок по центру

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

Для которого устанавливается атрибут align="center" . Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig , и применим его для нужных абзацев, как показано в примере 1.

Пример 1. Выравнивание рисунка по центру

В данном примере класс fig добавляется к селектору P , а способ выравнивания определяется свойством text-align . Положение рисунка относительно текста схематично показано на рис. 1.

Обтекание рисунка текстом

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Так, у тега есть атрибут align , который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right , для выравнивания по левому краю применяют left . Атрибут align часто используют в связке с другими атрибутами тега — vspace и hspace . Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега

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

Для обтекания картинки текстом также можно применить стилевое свойство float . Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left , наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

В данном примере к тегу добавляется класс fig , для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom .

Рисунок на поле

При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).

Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin .

Применение таблиц

Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега . В примере 4 показано создание указанной таблицы.

Пример 4. Создание рисунка на поле с помощью таблиц

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

Результат примера показан на рис. 4.

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.

Использование стилей

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic , а текст, сильно не мудрствуя, в слой text . Теперь для слоя piс следует установить свойство float со значением left , а для text — margin-left . Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

Пример 5. Использование margin

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

Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.

Если рисунок следует расположить справа от текста, то значение float меняем на right , а свойство margin-left на margin-right .

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

Используя методы, описанные в уроке, мы можем получить такой результат:

Подготовка

Возьмём картинку

Её размер — 350px × 200px. И этой информации достаточно для того, чтобы приступить к работе.
Теперь попробуем разместить поверх неё текст несколькими способами.

Способ первый: картинка как фон div

Сразу оговорюсь, что этот способ мне самому не нравится из-за примитивного конечного результата, но тем не менее он существует, поэтому я расскажу о нём.

Суть способа заключается в том, что мы берём тег div, задаём ему размеры, совпадающие с размером изображения, и устанавливаем картинку в качестве фона.
Обратите внимание, что размер тега = собственный размер + размер отступов padding. Таким образом, если мы хотим сделать отступ содержимого от края картинки на 20px, то размер самого div нужно указать на эти 20px меньше. То есть: 350-20 = 330 в ширину и 200-20 = 180 в высоту.

Текст

Example1 {
padding-top:20px;
width:330px;
padding-left:20px;
height:180px;
background-image:url("/examples/20120821/bg.png");

/*оформление текста*/
color:#FFF;

font-size:40px;
}

Результат:

Способ простой по структуре хтмл кода (требуется всего один тег), но зато он не позволяет задать тексту какие-то особые стили. В результате чего может получиться так, что текст будет сложно прочитать. Кроме того, блок жёстко привязан к размерам картинки, а значит, в случае изменения картинки придётся переписывать и css

Способ второй: наложение двух тегов друг на друга

Суть этого способа в том, что мы делаем 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 и структурой тегов можно добиться и такого результата:

Данный результат довольно неплохо подходит для оформления галлерей, витрин интернет-магазинов и прочих сервисов.

Код последнего результата:

Я — заголовок

А я — комментарий к этой прекрасной картинке. Я такой длинный, что занимаю несколько строчек.

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;

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;
}

position:relative; overflow: hidden;

Если же нужно показать только часть светлого блока, неравномерно убрав ненужные пиксели, то используется свойство clip: rect(вверх, вправо, вниз, влево); которое не применимо без position: absolute. auto показывает, что сторона остаётся без изменений.

position:relative;

clip: rect(auto, 200px, auto, 30px);

Взаимодействие блока с position: absolute с другими элементами

Мы можем в одном блоке разместить несколько элементов. Для удобства восприятия, не буду указывать .

А

Б

Если блоку А присвоить position: absolute, то блок Б расположиться так, словно блока А не существует - он займёт его место. Блок А уже не сможет влиять на положение блока Б ни посредством , ни своей площадью, словно он парит над ним.

А

Б

Блок А перекрывает блок Б. Но стоит второму добавить position в значении relative, absolute или fixed, как ситуация измениться.

position: absolute;

position: relative;

position: absolute;

position: absolute;

Теперь приоритетным будет тот блок, который расположен ниже в коде, в данной случае белый Б. Для того, чтобы изменить естественный порядок, мы используем z-index . Чем больше значение этого параметра, тем выше находится элемент. Стоит помнить лишь то, что для position: static это свойство игнорируется (искл. свойство ) и то, что в IE существует .

А

Б

Поскольку элементы не могут влиять на положение друг друга, то без указания для них значений (или если значения одинаковы) top, bottom, right, left, и margin, ложатся друг поверх друга. А высота родительского блока, коли она не установлена фиксировано, равна нулю. На этом принципе основаны многие вещи, в том числе .

А

Б

width (ширина) и position: absolute

width (или height) не применяется для большинства встроенных элементов. Имеет по умолчанию значение auto, что для блочного элемента равнозначно width: 100%.

Блочный

Встроенный

Встроен ный

Встроенный

Встроен ный

width: 100%; для обоих - это ширина родителя, для которого задано позиционирование отличное от static.

Блочный

Встроенный

Встроен ный

Если width не задано, но есть указание противоположных значений left и right, то блок растянется на всю ширину между этими двумя точками. Иначе right будет проигнорирован.

Блочный

Встроенный

Встроен ный

Пример как написать текст на изображении.

Указанные ниже образцы продемонстрируют возможности применения CSS наложения.

Лес и поле белые,
Белые луга.
У осин заснеженных
Ветки как рога.

Подо льдами крепкими
Дремлют воды рек.
Белыми сугробами
Лег на крыши снег.

В небе звезды яркие
Водят хоровод.
Старый год прощается -
Входит Новый год.

Е. Трутнева.

стих

автор

Образец как наложить один текст на другой.

Пример

Обра зец

Пример

Образец

Пример как разместить текст поверх изображения на HTML

Как написать текст на изображении Этот вариант приобретает всё большую популярность и возможен благодаря наложению одного слоя на другой с помощью свойств CSS

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

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

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

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

Код html:

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

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

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

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

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

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

Читайте также

• Windows 8

  Не приходят уведомления и сообщения WhatsApp на Android

• Компьютер

  МТС бонус — как потратить баллы МТС

• Браузеры

  Бесплатные программы для просмотра фото и управления изображениями

• Windows 8

  Как сбросить настройки Андроид до заводских (т

• Социальные сети

  Highscreen не включается Проблемы с памятью

Рекомендую Мне нравится КЛАСС! Твитнуть Pin it!

Версия для печати