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

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

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

Рис. 3.51. Карты рядом друг с другом

Рис. 3.52. Карты одна на другой

Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.

Рис. 3.53. Воображаемые координаты веб-страницы

Пример 3.38. Обычный порядок карт

В CSS за положением по Z-оси отвечает свойство z-index , которое определяет, «ближе» к нам элемент находится или «дальше». В качестве значений принимается целое число, чем оно больше, тем выше располагается элемент по отношению к другим. Элементам автоматически присваивается значение 0, так что даже z-index : 1 заставит элемент перекрывать все нижележащие. Доработаем пример 3.38 так, чтобы порядок карт поменялся на противоположный, причём только редактируя стиль, оставляя HTML-код прежним.

Card IMG { position: relative; } .three { top: 50px; left: 55px; z-index: 5; } .seven { left: -120px; top: 25px; z-index: 2; } .ace { left: -295px; z-index: 1; }

Свойство z-index для класса three специально установлено как 5 для демонстрации, что последовательность значений z-index роли не играет. Главное, чтобы одно число было больше другого.

Свойство z-index работает только для элементов, у которых значение position задано как absolute , fixed или relative .

Когда требуется расположить элемент поверх всех остальных на странице, ему ставят очень большое значение z-index , например 9999. Это гарантирует, что даже если в стилях и применяется z-index , он будет меньше указанного. В примере 3.39 у карт при наведении на них курсора меняется z-index на 10. Никаких скриптов здесь не понадобится, всё делается через псевдокласс :hover .

Пример 3.39. Изменение z-index при наведении на карту

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Некоторые находят неправильный выход: рисуют текст на картинке в графических редакторах, после чего размещают изображение с текстом в 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 (справа)

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

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

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

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

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

HTML-разметка

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

CSS

.image { position: relative; width: 100%; /* for IE 6 */ } h2 { position: absolute; top: 200px; left: 0; width: 100%; }

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

является блочным элементом, то его мы использовать для этих целей не можем. Воспользуемся 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(""); });

Каждый день на форумах 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;
}