Тема: Як на картинку помістити текст чи іконку?
Приклад прикріпив
Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → HTML та CSS → Як на картинку помістити текст чи іконку?
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися
як завжди є кілька варіантів
наприклад використати фонове зображення
background-color:#fff;
background-image:url("pic.jpg");
або ж один дів помістити над іншим і використати напівпрозорість
Можна через стилі зробити картинку фоновим зображенням блока й розмістити в цьому блоці текст.
Можна насунути текст на img, використовуючи засоби позиціонування.
Можна змонтувати зображення й текст засобами SVG.
Можна використати canvas та JavaScript.
Можна згенерувати картинку з текстом з допомогою PHP на сервері...
Думаю, це ще не всі можливі варіанти.
:before :after
Сам по собі контент, доданий через :before або :after, не зобов'язаний відображатися внакладку — треба ще додатково його позиціонувати (тобто, зробити приблизно те ж саме, що й зі звичайним шматком html, який ми хочемо розмістити поверх зображення).
створюєте клас візуального вигляту тексту з marginaми і пхайте в сереину тегу зображення.
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися