|
(Подразумевается, что мы уже разбираемся с тем,
как происходит вставка изображения в 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 Содержание
|
