Пишемо текст над зображенням, css-tricks по-російськи

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

Взагалі, саме питання нескладний. Немає нічого хитрого, щоб розташувати один блок, поверх іншого. Але все-таки, є і в цьому питанні кілька моментів, гідних обговорення. Я думаю знайдуться люди, кому це буде цікаво.

Ідея полягає в тому, щоб просто накладати певний текст на зображення. Текст представлений у вигляді блоків змінної довжини, передбачається що він буде розташований з лівого боку, з рівною заливкою навколо тексту. Наприклад, як на цьому зображенні:

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

HTML-розмітка

Звичайно, було б легше використовувати div-елемент для виведення зображення в якості фонового малюнка, але в даному випадку я припускаю, що зображення - це контент документа, і, отже, воно належить HTML. Елемент div будемо використовувати в якості контейнера для абсолютного позиціонування тексту в ньому.

Таким чином, ми розмістили текст безпосередньо над зображенням. Наступне наше завдання зробити фон для тексту. оскільки елемент

є блоковим елементом, то його ми використовувати для цих цілей не можемо. Скористаємося inline-елементом . Обернём в нього текст всередині заголовка.

Будемо використовувати цей span для оформлення тексту і фону:

Як видно з малюнка, в кінці рядка блок тексту закінчується безпосередньо після останнього символу в рядку, і починається відразу ж по лівому краю на наступному рядку. Властивість padding для span-а, в даному випадку, нам не допоможе.

Щоб вирішити проблему, необхідно використовувати додаткові span-и по обидві сторони від тега
, в цьому випадку ми вже зможемо скористатися padding-му.

Цим новим span-ам ми поставимо властивість padding:

Що на рахунок семантики?

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