Як написати текст поверх картинки css

У початковій стадії вивчення мов HTML, CSS і ін. З'являються (як це і повинно бути) питання: як зробити так, або ось, так і в нашому питанні, як написати текст поверху зображення. Цілком природне прояв інтересу, і вимагає закріплення знань в цій області. Але для виконання цього завдання ви вже повинні знати хоч малу частину CSS щоб розуміти базові властивості каскадної таблиці.

Насправді виконати написання тексту поверх картинки не настільки важко. Практично робиться за рахунок властивості position і його атрибутів, а далі йде оформлення самого тексту. Можна спробувати зробити по-іншому, наприклад, задати блоку div фон при цьому використовувати ту картинку, на якій повинен бути розташований текст.

Але такий спосіб обмежує можливості і саме застосування тексту поверх картинки. Тому найкращим варіантом буде скористатися властивістю position. Даний елемент дає великі переваги і повну свободу руху в зазначеній галузі, ця область позначається властивістю position: relative ;. А інакше позиціонування буде відбуватися по відношенню до браузеру.

Розглянемо на першому прикладі.

Пояснення. Основному блоку приписується значення position: relative; цим ми позначаємо область для вільного позиціонування наступних елементів в цьому класі.

Далі, форматіруем div в лінійно-блоковий елемент display: inline-block;

І останнє на що варто звернути увагу - це position: absolute ;. заданий елементу .

Інші стилі йдуть як оформлення тексту.

У другому прикладі використовуємо довшу напис на зображенні і стилізуємо її належним чином.

Ну от халепа, ми використовували тег
- перенесення рядка і в підсумки отримали розрив між прогалинами. Це видно в прикладі де текст щільно прилягає краях і на вигляд виходить не дуже красиво.

Виправити цю помилку можна по-різному. Застосувати, наприклад, нерозривний пробіл nbsp. що дозволить наростити проміжок.

У другому способі застосуємо тег ... він як тільки жирність поменше, але ми її зовсім приберемо.

У стилях додали нову властивість white-space: nowrap; щоб текст перебував на одному рядку. На цьому все, складного думаю нічого немає.

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

CSS ефекти для кнопок

Як зробити кілька фонових зображень CSS

Кнопки CSS. Короткий мануал з прикладами

Модулі для створення галереї на WordPress