Текст поверх картинки html
При создании блога или сайта иногда требуется разместить текст поверх картинки или текст поверх изображения. Познаний html, чего греха таить, у многих блоггеров не хватает, а то и вовсе нет. Ничего страшного, даже если и так. Используем Атрибут position в HTML
Можно скопировать простой код и использовать его немного модифицируя под свои нужды. Приведу простой пример:
Есть картинка:
Есть текст:
Текст поверх картинки html
Есть код:
| <div style="position:relative ; left:20px; top:200px;">
<h2>Текст поверх картинки HTML</h2>
</div>
<img src="/mbg.png" title="Текст поверх картинки html" alt="Текст поверх картинки" />
|
Получаем на выходе:
Текст поверх картинки HTM
Текст поверх картинки html Рис.2 Блочный элемент <div> с текстом находится внутри блочного элемента <div> с картинкой. ( см. подробнее о теге <div> )
Нужно правильно указать путь к картинке. С помощью тегов «position:relative ; left:20px; top:200px;» можно отрегулировать отступ текста слева и сверху.
Буквам тоже можно задать любой цвет и размер, было бы желание, и тогда вы сможете написать любой текст поверх картинки, поверх изображения с помощью HTML.
← Перейти в каталог html уроков и советов
|
