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

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

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

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

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'>"); }); 

Пример