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

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

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

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

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

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

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

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

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

6 ноября 2008 в 22:2027 комментариев Верстка

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

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

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

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

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

  3. #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.

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

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

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

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

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

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

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

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

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

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

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

    @ Иван Затылкин:
    спасибо за мнение 🙂

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

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

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

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

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

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

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

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

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

  11. #74910 Вячеслав в 8:51, 13 марта 2018: (подписался)

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

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

    Текст

  12. #77980 Снежана в 17:24, 19 декабря 2018:

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

    Не нашла решение проблемы с отступами после картинки. Если применить стандартный вариант — всё ок, а если менять размер текста, снизу картинки появляется большое пространство, которое не понятно как убрать (в коде меняется только размер текста), никаких отступов как будто и нет.

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting