Главная » Создание сайтов » Верстка » Текст или картинка, поверх картинки!

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

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

У меня недавно стал вопрос, как сделать текст поверх картинки. Тогда я мог с уверенностью сказать, что так сделать нельзя. И конечно же оказался неправ. Это реально сделать, причем не затрачивая на это много усилий! Потому что это самое простое что можно сделать...

И так, для начала создадим саму картинку.

<img src="url images" />

Есть картинка, поверха которой нужно сделать текст. Мы сделаем это с помощью «position». Но для начала, что оно из себя представляет.

Position — Устанавливает способ позиционирования, относительно родителя.

  • position: absolute; — задает абсолютное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают абсолютные координаты элемента страницы относительно родителя.
  • position: relative; — задает относительное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают смещение координат элемента страницы от точки, в которой он был отображен, будь атрибут position установлен в static.
  • position: static; — (значение по умолчанию) задает статическое позиционирование, при котором элемент страницы отображается внутри общего «потока» текста, т.е. не свободно. Значения атрибутов bottom, left, right и top при этом не принимаются Web-обозревателем во внимание.
  1. Хм... Если вы делаете только одно изображение на всю страницу, то выгодно будет пользоваться absolute, так как он позволит выбрать положение по всему экрану.
  2. А если вам нужно будет сделать маленькую картинку в нутри тега <div> или в таблице, то лучше воспользоваться relative.

Мне нужно было сделать так как во втором примере. Делаем текст, который в дальнейшем будет находится на картинке. Вот пример:

<div width="10%"><!-- Див, в ктором находится наш текст и картинка --><br />
<img src="logo.jpg"><br />
<div>Текст поверх картинки</div><br />
</div>

После этого кода получается текст ниже картинки. Чтобы он стал на картинке, задаем ему position:relative;

<div width="100%"><br />
<img src="logo.jpg"><br />
<div style="position:relative;bottom:100px;">Текст поверх картинки</div><br />
</div><br />

bottom:100px; — показывает настройки расположения текста. Настраивайте под свой вкус ;).

Ну вот и все... Надеюсь полезен был урок!

С уважением, Vasilenko Ivan!
6 ноября 2008 в 22:2025 комментариев Верстка

Комментарии — 25 комментариев

  1. #92 Сергей М. в 0:53, 8 ноября 2008:

    Ответить | Цитировать

    Ммммм... а почему не наоборот? Картинка под текстом? Вообще, ситуаций, когда изображение семантически главнее, чем текст. Который, к тому же, надо будет еще выводить абсолютом. И он связан с картинкой только тем, что находится в одном диве (да еще без CSS и с deprecated атрибутом width в примере).

    Не лучше ли просто сделать див с текстом, под который бэкграундом картинку? И код легче будет, заодно.

  2. #94 admin в 11:48, 8 ноября 2008:

    Ответить | Цитировать

    В статье же не написано, что это единственный выход из сложившийся ситуации, конечно есть и другие (некоторые даже и легче и рациональнее), но тут описан именно этот...

  3. #95 lucash в 18:42, 8 ноября 2008:

    Ответить | Цитировать

    Спасибо за новость, очень познавательно сейчас сам пойду делать себе тоже самое у себя на сайте

  4. #97 Сергей М. в 14:01, 9 ноября 2008:

    Ответить | Цитировать

    Не понимаю этого. Можно и гвозди забивать микроскопом.

  5. #98 WebMast в 20:58, 9 ноября 2008:

    Ответить | Цитировать

    Сергей (извини что на ты), все потому что иногда нужно сделать так, чтобы картинка подходила под все разрешения экранов, то есть width="100%". И тогда background здесь бессилен(.

  6. #99 Сергей М. в 14:52, 10 ноября 2008:

    Ответить | Цитировать

    Да нет, как раз на «ты» — нормально :). Хм, ну при резиновой верстки — такое может быть, да, не подумал. Мне лично кажется, что семантичность и клиентская оптимизация важнее. Но решение на всякий случай в закладки.

  7. #144 WebS в 8:26, 2 декабря 2008:

    Ответить | Цитировать

    Спасибо, пригодилось :) Мне нужно было скрыть текст «Реклама tak.ru» который генерировался JavaScript'ом, а весь остальной текст, генерируемый темже скриптом нужно оставить, я сделал так cybergeek.ru :

    Просто забыл сначало, что метод позиционирования тоже менять нужно, иначе вывод скрипта всё перекроент :)))

  8. #147 олег в 17:44, 2 декабря 2008:

    Ответить | Цитировать

    И когда надо, что бы картинка распечатывалась, а то background по умолчанию не распечатывается (

  9. #8216 Sokirlov в 1:41, 19 ноября 2009: (подписался)

    Ответить | Цитировать

    У меня в таблици после тега див получаються большие отступы. Можно ли их как то сокротить.

    По поводу картинок на фон, так тут все просто.

    Единстенное чего не может фон так это быть ссылкой. А все остальное это ерунда. Для того чтоб фон не скакал можно ему указать норепит в стилях.

  10. #8226 WebMast в 14:43, 19 ноября 2009:

    Ответить | Цитировать

    Sokirlov, посмтри статью про css reset.

    А как ты при помощи одного фона сделаешь его резиновым? Вот здесь помогает этот пример...

  11. #9275 dimondj в 12:24, 25 января 2010:

    Ответить | Цитировать

    Я не могу подогнать картинку под текст у меня текст то ниже то выше. Как сделать чтобы текст был поверх картинкы?

  12. #9276 WebMast в 19:42, 25 января 2010:

    Ответить | Цитировать

    Оберните текст в div. Задай ему position:absolute;. Рядом поставь картинку. Оберните и текст и картинку в один div со свойством position:absolute;.

  13. #9601 Денис в 2:08, 12 апреля 2010:

    Ответить | Цитировать

    Спасибо огромное! Я пол сети облазил, везде пишут почти то же, за исключением главного, а именно что бы текст был ПОВЕРХ картинки, а не с низу... Еще раз СПАСИБО!

  14. спасибо за пост... долго мучалась и искала как написать текст на картинке, а вы мне очень помогли ))

  15. #9809 tiff в 9:25, 23 июня 2010: (подписался)

    Ответить | Цитировать

    У меня под картинкой с текстом еще пространство свободное...Как его убрать?

  16. tiff, можно подробнее описать? Желательно скриншот.

  17. #9868 катя в 18:51, 7 июля 2010:

    Ответить | Цитировать

    пасибо! Помогло)

  18. #9874 Artur в 13:00, 11 июля 2010:

    Ответить | Цитировать

    Avtory ogromnii respect, dva dnya bilsya bashkoi ob stenki, ne mog nalozhit' text na background sozdanii JPG failom. Opisanim sposobom smog i JPG fail ylozhit' po gabaritam i nadpis' po verxy sdelat', kak trebovali ysloviya kyrsovoi raboti. Blagodaru. Regards.

  19. #10868 Kolobokk в 12:57, 22 января 2011:

    Ответить | Цитировать

    Статью не видно в IE8 v8.06001.18702 (en), OS XP SP3. Открыл в Firrefox.

  20. #12541 Bagum_ в 15:41, 7 августа 2011:

    Ответить | Цитировать

    спасибо большое автору!! разрешил вопрос над которым я уже бьюсь целый день!! очень помогла статья!!! СПАСИБО ЕЩЕ РАЗ!!!

  21. #14382 Иван Затылкин в 6:42, 29 марта 2012:

    Ответить | Цитировать

    Автору — решпект!

  22. #14402 vanoID в 8:43, 30 марта 2012:

    Ответить | Цитировать

    @ Иван Затылкин:

    спасибо за мнение :-)

  23. #57692 Виктория в 11:38, 26 августа 2016: (подписался)

    Ответить | Цитировать

    а если фиксированная шапка, то свойство relative при прокручивании налаживает изображение на шапку, как это можно исправить?

  24. #66708 Елена в 12:33, 18 апреля 2017:

    Ответить | Цитировать

    Супер! Спасибо! как раз то что надо! Удачи!

  25. #70630 Роман в 13:05, 29 сентября 2017:

    Ответить | Цитировать

    Будет лучше если основному div дать позишн релатив а текст сделать абсолют , так правильнее)))

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting