Текст или картинка, поверх картинки!
Четверг, Ноябрь 6, 2008 22:20
У меня недавно стал вопрос, как сделать текст поверх картинки. Тогда я мог с уверенностью сказать, что так сделать нельзя. И конечно же оказался неправ. Это реально сделать, причем не затрачивая на это много усилий! Потому что это самое простое что можно сделать...
И так, для начала создадим саму картинку.
<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-обозревателем во внимание.
- Хм... Если вы делаете только одно изображение на всю страницу, то выгодно будет пользоваться absolute, так как он позволит выбрать положение по всему экрану.
- А если вам нужно будет сделать маленькую картинку в нутри тега <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; — показывает настройки расположения текста. Настраивайте под свой вкус ;).
Ну вот и все... Надеюсь полезен был урок!
Loading ...
Сергей М. сообщил:
Ноябрь 8th, 2008 0:53
Ммммм... а почему не наоборот? Картинка под текстом? Вообще, ситуаций, когда изображение семантически главнее, чем текст. Который, к тому же, надо будет еще выводить абсолютом. И он связан с картинкой только тем, что находится в одном диве (да еще без CSS и с deprecated атрибутом width в примере).
Не лучше ли просто сделать див с текстом, под который бэкграундом картинку? И код легче будет, заодно.
admin сообщил:
Ноябрь 8th, 2008 11:48
В статье же не написано, что это единственный выход из сложившийся ситуации, конечно есть и другие (некоторые даже и легче и рациональнее), но тут описан именно этот...
lucash сообщил:
Ноябрь 8th, 2008 18:42
Спасибо за новость, очень познавательно сейчас сам пойду делать себе тоже самое у себя на сайте
Сергей М. сообщил:
Ноябрь 9th, 2008 14:01
Не понимаю этого. Можно и гвозди забивать микроскопом.
WebMast сообщил:
Ноябрь 9th, 2008 20:58
Сергей (извини что на ты), все потому что иногда нужно сделать так, чтобы картинка подходила под все разрешения экранов, то есть width="100%". И тогда background здесь бессилен(.
Сергей М. сообщил:
Ноябрь 10th, 2008 14:52
Да нет, как раз на «ты» — нормально :). Хм, ну при резиновой верстки — такое может быть, да, не подумал. Мне лично кажется, что семантичность и клиентская оптимизация важнее. Но решение на всякий случай в закладки.
WebS сообщил:
Декабрь 2nd, 2008 8:26
Спасибо, пригодилось
Мне нужно было скрыть текст «Реклама tak.ru» который генерировался JavaScript'ом, а весь остальной текст, генерируемый темже скриптом нужно оставить, я сделал так :
Просто забыл сначало, что метод позиционирования тоже менять нужно, иначе вывод скрипта всё перекроент :)))
олег сообщил:
Декабрь 2nd, 2008 17:44
И когда надо, что бы картинка распечатывалась, а то background по умолчанию не распечатывается (
Sokirlov сообщил:
Ноябрь 19th, 2009 1:41
У меня в таблици после тега див получаються большие отступы. Можно ли их как то сокротить.
По поводу картинок на фон, так тут все просто.
Единстенное чего не может фон так это быть ссылкой. А все остальное это ерунда. Для того чтоб фон не скакал можно ему указать норепит в стилях.
WebMast сообщил:
Ноябрь 19th, 2009 14:43
Sokirlov, посмтри статью про css reset.
А как ты при помощи одного фона сделаешь его резиновым? Вот здесь помогает этот пример...
dimondj сообщил:
Январь 25th, 2010 12:24
Я не могу подогнать картинку под текст у меня текст то ниже то выше. Как сделать чтобы текст был поверх картинкы?
WebMast сообщил:
Январь 25th, 2010 19:42
Оберните текст в div. Задай ему position:absolute;. Рядом поставь картинку. Оберните и текст и картинку в один div со свойством position:absolute;.
Денис сообщил:
Апрель 12th, 2010 2:08
Спасибо огромное! Я пол сети облазил, везде пишут почти то же, за исключением главного, а именно что бы текст был ПОВЕРХ картинки, а не с низу... Еще раз СПАСИБО!
ксюша сообщил:
Май 13th, 2010 10:54
спасибо за пост... долго мучалась и искала как написать текст на картинке, а вы мне очень помогли ))
tiff сообщил:
Июнь 23rd, 2010 9:25
У меня под картинкой с текстом еще пространство свободное...Как его убрать?
Евгений Жлобо сообщил:
Июнь 23rd, 2010 11:10
tiff, можно подробнее описать? Желательно скриншот.
катя сообщил:
Июль 7th, 2010 18:51
пасибо! Помогло)
Artur сообщил:
Июль 11th, 2010 13:00
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.