У меня недавно стал вопрос, как сделать текст поверх картинки. Тогда я мог с уверенностью сказать, что так сделать нельзя. И конечно же оказался неправ. Это реально сделать, причем не затрачивая на это много усилий! Потому что это самое простое что можно сделать..
И так, для начала создадим саму картинку.
<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; — показывает настройки расположения текста. Настраивайте под свой вкус ;).
Ну вот и все.. Надеюсь полезен был урок!
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
спасибо за мнение 🙂
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Текст
Ответить | Цитировать