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

Унылая пора! Очей очарованье!
Приятна мне твоя прощальная краса —
Люблю я пышное природы увяданье,
В багрец и в золото одетые леса.

А.С.Пушкин

И.Левитан "Золотая осень"

Сейчас в Киеве настоящее бабье лето. В транспорте промелькнула песня "Что такое осень". Решила порадовать себя и поставить себе в блог. А к песне не помешает и картинка. Но так как картинки  и плеер  вставлять вроде бы умею, захотелось освоить новенькое. Код с наложением текста на картинку и образец находились в закладках. Думала освою быстренько, да не тут-то было. Текст съехал вниз и был явно велик для данной картинки. Решила подправить - все буковки разбежались и возвращаться не собирались. И как бы мне не хотелось, пришлось прощупать каждую циферку. Итак, все по-порядку. 

Код можно скопировать, только поставьте свою картинку. Моя для эксперимента слишком велика. Текст пока не трогайте.

<div style="position: relative;">
<img border="0" height="374" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcylWafRQfKdOt-v7utZq_qwDi4wdKDCOJWwYrJsYwy9kqGqH-RUitCNMMkEWeCKipuGIkjJiUEtgDn3JQ7RFtLdkIi4rYHzOHjyXi97Fe8LQAbDLdbWy6kTAt-8h98xLBl40iZAIBmng/s144/Levitan.jpg" width="558" alt="Левитан"/>
<div style="font-family: Courier; font-size: 80%; left: 320px; position: absolute; top: 15px; width: 280px; text-indent: 0px;">Текст</div>
<div style="font-family: Courier; font-size: 80%; left: 480px; position: absolute; top: 80px; width: 150px;">А.С.Пушкин</div>
<div style="font-family: Courier; font-size: 80%; left: 60px; position: absolute; top: 350px; width: 200px;">И.Левитан "Золотая осень"</div>
</div>

В первой части кода я прописала истинные размеры картинки, сохраненной на компьютере, но изображение было мутным. Нажала в редакторе "Исходный размер" - изображение приняло нормальный вид. Затем поставила его по центру с помощью иконки. Вот тут-то все ваши настройки текста и сбиваются. Поэтому я и сказала, что текст не трогать до поры. Теперь пишем текст,  смотрим и подправляем.

font-size: 80%.  - отвечает за размер текста

left: 350px         - расстояние от левого края

top: 8px             - расстояние от верха

width: 150px     - размер, зарезервированный под текст

Как вы понимаете, 2 пары нижних  строчек в коде можно убрать, если они не нужны.

Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы быть в курсе, подпишитесь на  RSS-канал

Понравилась статья? Поделитесь с друзьями.