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

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

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

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

HTML-разметка

<div class="image"> <img src="image1.jpg" alt="" /> <h2>A Movie in the Park:<br />Kung Fu Panda</h2> </div>

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

CSS

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

Таким образом, мы разместили текст непосредственно поверх изображения. Следующая наша задача сделать фон для текста. Поскольку элемент <h2> является блочным элементом, то его мы использовать для этих целей не можем. Воспользуемся inline-элементом <span>. Обернём в него текст внутри заголовка.

<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>

Будем использовать этот 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-ы по обе стороны от тега <br />, в этом случае мы уже сможем воспользоваться padding-ом.

<h2> <span>A Movie in the Park: <span class="spacer"></span> <br /> <span class="spacer"></span> Kung Fu Panda </span> </h2>

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

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

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

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

<h2> A Movie in the Park:<br />Kung Fu Panda </h2>
 $(function() { $("h2").wrapInner("<span>"); $("h2 br").before("<span class='spacer'>") .after("<span class='spacer'>"); }); 

Пример

Опубликовано: 12.11.2009 Просмотров 127064 Ссылка на оригинал Tweet it!
30 comments  

Дмитрий

2010.01.11 00:58

 Хм.. Попробую применить для динамического вывода в шапке
 

Марина

2010.02.01 21:09

 Все здорово! Все работает! а как разместить какртинку поверх картинки? у меня она обозначена, но самой картинки нет...
 

basilkot

2010.02.01 22:15

Jay

2010.03.18 02:52

 В IE нет полупрозрачности - чёрный квадрат...
 

basilkot

2010.03.18 04:46

  • Например кк написано тут:

    http://www.css-tricks.ru/Articles/Details/RGBaBrowserSupport

Jay

2010.03.19 02:18

 Спасибо!
 

Champ

2010.03.19 19:39

 а как разместить текст поверх меняющихся картинок (jquary скрипт - эффект cross slide)?
 

basilkot

2010.03.20 07:11

  • не совсем понятно что вы имеете в виду.
    просто сделать подпись над картинками? в этом случае я думаю достаточно будет обернуть div, в котором они показываются в ещё один div, а дальше поступать как в статье.

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

Ирина

2010.04.16 17:52

 1000 раз спасибо за Ваш труд
 

Не представился

2010.04.27 21:44

 СПАСИБО АВТОР !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ОТ ВСЕЙ ДУШИ. Эта идея наталкнула меня на мысль как усложнить копирования картинок с сайта (тупо сохраняя все подряд )
 

Не представился

2010.04.27 22:17

 В ie неработает этот способ , текст смещается к центру страници (про первый способ)
 

Не представился

2010.04.27 23:08

 Все работает я ошибся
 

lenivyjkot

2010.05.25 00:43

 Спасибо большое, как раз то, что искал.
Правда со "спейсером" что-то не удалось.
Но проблему решил гораздо проще: добавив символ-пробел, куда нужно было мне: &#160;
Конечно это глупо, но в моём случае - идеальный выход.
 

Не представился

2011.04.25 16:20

 !!!!!!!!!
 

Оксана

2011.05.15 21:42

 Спасибо за информативный пост. А подскажите, можно таким методом выводить в шапку короткие анонсы постов?
 

TaH4uk

2011.06.06 20:48

 Не работает в ссылку пытаюсь впехнуть не выходит:(
 

Не представился

2011.06.29 18:03

 спасибо за статью
 

Не представился

2011.11.06 22:25

 спасибо
 

dayser

2012.03.30 17:31

 в который раз использую эту статью. Огромное спасибо автору за отличную развёртку статьи.
 

стася

2012.04.08 18:26

 Спасибо огромное
 

tlamer

2012.04.13 01:05

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

lucky

2012.09.05 10:26

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

Не представился

2013.02.15 14:36

 ▀▄ ▀▄ ▀▄ ▀▄▀ ▄▀▄▀▄
 

CinemaCity.kz

2013.07.14 12:28

 Реально полезная страница.. Очень понадобилась, сделал на своем сайте..
 

Ольга

2014.05.21 16:37

 Очень полезно) Больше нигде настолько подробного объяснения не нашла... Спасибо огромное!)
 

Евгений

2015.02.18 21:38

 Подскажите, пожалуйста, в каком файле нужно разместить второй код?
 

basilkot

2015.02.19 21:01

  • мм.. какой второй?

    можно всё в одном файле разместить, можно раскидать по разным (html, css, js).

    не понятен ваш вопрос, честно говоря.

nigmatic

2016.04.01 02:51

 Найс! Очень помогло.
 

Анна

2016.04.14 11:25

 Все просто и понятно! Спасибо большое!
 

Владислав

2016.05.04 15:12

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

Ярик

2016.08.02 14:46

 Вообще-то пробел можно было поставить и при помощи &nbsp;
 

Ярик

2016.08.02 14:52

 Вообще-то пробел можно было поставить и при помощи &nbsp;
 

Ярик

2016.08.02 14:52

 Вообще-то пробел можно было поставить и при помощи &nbsp;
 

Андрей Лымарь

2016.08.27 20:43

 фоточка у вас на ниКе basilkot - хорошая!?а вот я к примеру тот кто изображен на ней, а имя у меня другое потому попозьзуюсь сайтом к своим услугам!
 

Оставить после себя комментарий

user

2016.11.19

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!