Как с помощью CSS наложить текст на картинку

Всем, доброго времени суток. С помощью элемента position: relative и position: absolute можно легко сделать наложение текста на картинку. Не нужно прибегать к использованию сторонних онлайн - редакторов и программ. Всё делается на чистом CSS. Посмотрите ниже, чтобы понять как в итоге будет выглядеть картинка и текст на ней.
 

Дама сдавала в багаж Диван, Чемодан, Саквояж, Картину, Корзину, Картонку И маленькую собачонку. Выдали даме на станции Четыре зеленых квитанции О том, что получен багаж: Диван, Чемодан, Саквояж, Картина, Корзина, Картонка И маленькая собачонка.

С. Маршак

В моём случае я использовала такой код, где расположение блока с тестом на левой стороне, а имя автора внизу справа.

<div style="position: relative;">
<img border="0" height="315" src=" Адрес изображения (URL) " width="460" alt="Багаж"/>
<div style="font-family: Courier; font-size: 80%; left: 150px; position: absolute; top: 30px; width: 150px; text-indent: 0px;">Здесь весь отображаемый текст на картинке</div>
<div style="font-family: Courier; font-size: 80%; left: 340px; position: absolute; top: 290px; width: 150px;">автор</div>
</div>

Синим цветом отмечен адрес самой картинки, а всё остальное дело техники. Для понимания-

left: 150px; и  left: 340px; расположение основного текста относительно левого края и имя автора.

С помощью свойства position: absolute; задали расположения текста top: 30px;   и подписи сверху top: 290px; Почитайте про это здесь, потому что при реализации у себя вам потребуется эти значения поменять на большие или меньшие. Так же ширина и высота всего блока по вашему желанию.

Изменить цвет самого шрифта и его толщину в Блоггер можно сделать уже непосредственно в редакторе сообщений, как при рабтое с другим  любым текстом.

Возможно, вам пригодится шпаргалка как сделать наложение картинки на картинку.

Так просто можно написать любой текст на изображении. Код совершенно лёгкий по сравнению с загружаемыми картинками.

Всем спасибо за внимание и до встречи.   

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email