Как с помощью 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


7 комментариев:

  1. Текст на картинку? ИНТЕРЕСНО!!!

    ОтветитьУдалить
    Ответы
    1. Ирина, а почему бы и нет. совсем простой код, подстраивай размеры как надо и все дела.

      Удалить
  2. интересно, а главное,довольно просто

    ОтветитьУдалить
    Ответы
    1. Семён, на самом деле всё проще простого.

      Удалить

  3. А я не знала, что можно так текст написать на изображение, пользовалась фотошопом, хотя в нем еще слаба. Вика, к сожалению, по ссылке (здесь) перейти не смогла, не удалось получить доступ к сайту. Почему?

    ОтветитьУдалить
  4. Алла, здравствуйте. Не знаю в чём дело, но я проверила, ссылка рабочая. А снадписью всё очень просто. Кстати, готов пост ещё об одном варианте подписи для картинки.

    ОтветитьУдалить
    Ответы
    1. Делитесь, с удовольствием почитаю.

      Удалить

Пользовательский поиск