Текст или картинка, поверх картинки!
У меня недавно стал вопрос, как сделать текст поверх картинки. Тогда я мог с уверенностью сказать, что так сделать нельзя. И конечно же оказался неправ. Это реально сделать, причем не затрачивая на это много усилий! Потому что это самое простое что можно сделать...
И так, для начала создадим саму картинку.
Code
<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.
Мне нужно было сделать так как во втором примере. Делаем текст, который в дальнейшем будет находится на картинке. Вот пример:
Code
<div width="10%"><!-- Див, в ктором находится наш текст и картинка --><br />
<img src="logo.jpg"><br />
<div>Текст поверх картинки</div><br />
</div>
После этого кода получается текст ниже картинки. Чтобы он стал на картинке, задаем ему position:relative;
Code
<div width="100%"><br />
<img src="logo.jpg"><br />
<div style="position:relative;bottom:100px;">Текст поверх картинки</div><br />
</div><br />
bottom:100px; — показывает настройки расположения текста. Настраивайте под свой вкус .
Ну вот и все... Надеюсь полезен был урок!
