Иллюстрация



Иллюстрация 1

A centered background image, with copies repeated up and down the padding and content areas.
   [D]

Единственная копия фонового изображения центрирована, а другие копии помещены выше и ниже, чтобы создать вертикальную ленту позади элемента. 'background-attachment'

Значение:scroll | fixed | inherit
Начальное:scroll
Применяется:  ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Если специфицировано изображение фона, то данное свойство определяет, является ли оно фиксированным относительно порта просмотра ('fixed'), или прокручивается вместе с документом ('scroll').

Даже если изображение зафиксировано, оно будет видно только в том случае, если находится в области фона или заполнения элемента. Таким образом, пока изображение не размножено ('background-repeat: repeat'), оно может быть невидимым.

Пример(ы):

Здесь создаётся бесконечная вертикальная полоса, остающаяся "приклеенной" к порту просмотра при прокручивании элемента. BODY { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; }

ПА могут рассматривать 'fixed' как 'scroll'. Однако рекомендуется, чтобы они интерпретировали 'fixed' корректно, хотя бы для элементов HTML и BODY, поскольку у автора нет способа предоставлять изображение только для тех браузеров, которые поддерживают 'fixed'. См. детали в разделе соответствие. 'background-position'

Значение:[ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Начальное:0% 0%
Применяется:  к элементам уровня блока и к замещаемым элементам
Наследуется:нет
Процентное:относится к размеру самого бокса
Носитель:визуальный

Если фоновое изображение специфицировано, то данное свойство определяет его (изображения) начальную позицию.
Значения имеют следующий смысл:

<percentage> <percentage> Если пара значений - '0% 0%', то верхний левый угол изображения выровнен с левым верхним углом кромки заполнения бокса. Пара значений '100% 100%' помещает нижний правый угол изображения в нижний правый угол области заполнения. Если пара значений - '14% 84%', точка изображения 14% поперёк и 84% вниз помещается в точку 14% поперёк и 84% вниз области заполнения. <length> <length> Если пара значений - '2cm 2cm', то верхний левый угол изображения помещается на 2cm вправо и на 2cm вниз от верхнего левого угла области заполнения. top left и left top То же, что '0% 0%'.top, top center и center top То же, что '50% 0%'.right top и top right То же, что '100% 0%'.left, left center и center left То же, что '0% 50%'.center и center center То же, что '50% 50%'.right, right center и center right То же, что '100% 50%'.bottom left и left bottom То же, что '0% 100%'.bottom, bottom center и center bottom То же, что '50% 100%'.bottom right и right bottom То же, что '100% 100%'.

Если задано только одно значение, в процентах или единицах измерения, то оно устанавливает только горизонтальную позицию, вертикальная позиция будет 50%.
Если заданы два значения, первое задаёт горизонтальную позицию.
Допускаются комбинации значений в процентах и единицах измерения (например, '50% 2cm'). Допускаются негативные значения позиции. Ключевые слова не могут комбинироваться со значениями в процентах или единицах измерения (все возможные сочетания приведены выше).

Пример(ы):

BODY { background: url("banner.jpeg") right top } /* 100% 0% */ BODY { background: url("banner.jpeg") top center } /* 50% 0% */ BODY { background: url("banner.jpeg") center } /* 50% 50% */ BODY { background: url("banner.jpeg") bottom } /* 50% 100% */

Если фоновое изображение фиксировано в порте просмотра (см. свойство 'background-attachment'), то изображение размещается относительно порта просмотра, а не относительно области заполнения элемента. Например,

Пример(ы):

BODY { background-image: url("logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; }

В данном примере изображение (одиночное) размещается в правом верхнем углу порта просмотра. 'background'

Значение:[<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
Начальное:не определено для сокращённых свойств
Применяется:  ко всем элементам
Наследуется:нет
Процентное:разрешено для 'background-position'
Носитель:визуальный

Свойство 'background' это сокращённое свойство для установки индивидуальных свойств фона (т.е. 'background-color', 'background-image', 'background-repeat', 'background-attachment' и 'background-position') в одном месте в таблице стилей.

Свойство 'background' сначала устанавливает все индивидуальные свойства фона в их начальные значения, а затем назначает явные значения, заданные в объявлении.

Пример(ы):

В первом правиле задано только значение 'background-color', а другие индивидуальные свойства установлены в свои начальные значения.
Во втором правиле все индивидуальные свойства специфицированы. BODY { background: red } P { background: url("chess.png") gray 50% repeat fixed }



- Начало - - Назад - - Вперед -


Книжный магазин