ВСТАВКА ИЗОБРАЖЕНИЯ

 

(Подразумевается, что мы уже разбираемся с тем, как происходит вставка изображения в html. Если это не так, то перечитайте лекцию "Основы html")

По сравнению с html, в css намного больше средств по управлению изображениями.

За отображение фонового рисунка отвечают 4 свойства:

background-image

background-repeat

background-attachment

background-position

 

  • В background-image мы прописываем путь до фонового изображения. Пример:

    body {background-image: url(picter.jpg)}

  •  

  • В background-repeat прописываем алгоритм повторения фонового изображения. Возможны следующие значения:

    repeat - изображение повторяется по вертикали и по горизонтали, заполняя всю площадь отведенного пространства

    repeat-x - изображение повторяется только по горизонтали

    repeat-y - изображение повторяется только по вертикали

    no-repeat - изображение не повторяется

     

  • background-attachment отвечает за прокрутку изображения. Значения:

    fixed - изображение не прокурчивается вслед за скролингом

    scroll - изображение прокурчивается

     

  • Значение background-position отвечает за расположение фонового изображения. Обозначается цифрами или ключевыми значениями. Цифры: используются любые, абсолютные или относительные единицы. Если задано одно число, например, 10%, то подразумевается горизонтальное смещение. Два числа, например 10% 20% означают смещение по горизонтали на 10%, а по вертикали на 20%. Ключевые слова: left, right, top, bottom, center. Позиция по умолчанию: 0% 0% или top left

Суммируя все вышесказанное, вставим изображение:

 

<style type="text/css">
#fon { background-image: url(picters/dog.jpg);
background-attachment:
scroll;
background-position:bottom;
background-repeat:no-repeat;

height:461px;}
</style>
</head>
<body>
<div id="fon"> text</div>
</body>

 

Обратите внимание на то, что помимо вышерассмотренных значений свойств, в стилях присутствует значение height. Этот параметр (вместе с width) желательно прописывать, чтобы все браузеры одинаково воспринимали размеры рисунка и не подгоняли под заданные по умолчанию.

 

В CSS существует обобщенное свойство background, благодаря которому данную характеристику картинки можно записать более кратко:

#fon {background: url(picters/dog.jpg) no-repeat fixed bottom height:461px;}

 

 

 

Лекция3  Содержание

 

Hosted by uCoz