| ... |
|
|
|
|
|||
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
BODY { background-image: url(images/bg.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; } |
В CSS существует понятие стенографического свойства, позволяющего упрощенно записывать правила, относящиеся к заданию стилей для одного элемента, в данном случае для фонового изображения. Свойство background является стенографическим свойством для задания значений свойств: background-image, background-repeat, background-attachment и background-position. Таким образом, показанный выше пример можно переписать так:
|
BODY {
background: url(images/bg.gif) no-repeat fixed 50% 50% } В сокращенной форме записи background значения всех свойств разделяются пробелами, а порядок указания значений произвольный. Это же правило можно записать и так: BODY {
background: no-repeat url(images/bg.gif) 50% 50% fixed }
|
Вот мы и познакомились со свойствами цвета и фона, и вы знаете, как с помощью CSS можно задать варианты повторения фона и позиционировать фоновое изображение. Краткое описание всех этих свойств приведено в таблице:
| Свойства Цвета и Фона в CSS | ||
| Свойство | Описание | Пример |
| color | Назначает цвет элемента | STRONG {color:red;} |
| background-color | Назначает цвет фона элемента | Н4 {background-color: silver;} |
| background-images | Определяет URL фонового изображения | BODY {background-images: url(bg.gif);} |
| background-repeat | Задает стиль повторения фонового изображения repeat | repeat-x | repeat-y | no-repeat |
BODY {background-repeat: no-repeat;} |
| background-attachment | Устанавливает возможность прокрутки фонового изображения вместе с элементом scroll|fixed |
BODY {background-attachment: scroll;} |
| background-repeat | Задает стиль повторения фонового изображения repeat | repeat-x | repeat-y | no-repeat |
BODY {background-repeat: no-repeat;} |
| background-position | Устанавливает начальную позицию фонового изображения в процентах, абсолютных величинах или с помощью ключевых слов top center | bottom right и т.д. |
BODY {background-position: top center;} |
| background | Сокращенная запись определяет свойства фона в любом порядке | P { background: url("chess.png") gray 50% repeat fixed } |
Страница: - 1 - | - 2 - | - 3 - | - 4 -
| Уроки CSS © 2007 - 2012 г. Все права защищены | ||