Глава 2.7. Цвет и фон

2.7.1. Цвет текста: свойство color

Синтаксис:  color: <цвет> | inherit
Начально:   зависит от обозревателя
Применимо:  ко всем элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Соответствует стандарту (4.0+)

Свойство color задает цвет текста содержимого элемента при отображении. Примеры:

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

Примечание. Во избежании конфликта с пользовательской таблицей стилей, это свойство следует задавать вместе со свойством background.

2.7.2. Задание фона

Фон элемента может задаваться либо цветом (background-color), либо графическим образом (background-image, background-repeat, background-attachment и background-position). Можно также пользоваться сокращенным свойством background. Напомним, что фон элемента распространяется на область содержимого элемента и его заполнителя.

Фон корня дерева документов является фоном для отображения документа в целом, но для HTML-документов рекомендуется задавать общий фон в свойствах элемента BODY, а не HTML.

2.7.2.1. Цвет фона: свойство background-color

Синтаксис:  background-color: <цвет> | transparent | inherit
Начально:   transparent
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Соответствует стандарту (4.0+)

Свойство background-color задает цвет фона элемента при отображении. Значение transparent, принятое по умолчанию, соответствует прозрачному фону. Примеры:

BODY { background-color: white }
H1 { background-color: #0000F0 }
H2 { background-color: #0cc }

Примечание. Во избежании конфликта с пользовательской таблицей стилей, при задании этого свойства следует задавать также свойство background-image (обычно со значением none).

2.7.2.2. Графический образ фона: свойство background-image

Синтаксис:  background-image: <uri> | none | inherit
Начально:   none
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Соответствует стандарту (4.0+)

Свойство background-image задает графический образ фона элемента при отображении. Значение none, принятое по умолчанию, означает отсутствие фонового образа. Примеры:

BODY { background-image: url("marble.gif") }
P { background-image: none }

Примечание. При задании этого свойства следует задавать также свойство background-color на случай невозможности загрузки графического образа. Если заданы оба эти свойства, то цвет фона будет виден в прозрачных областях образа.

2.7.2.3. Повтор фонового образа: свойство background-repeat

Синтаксис:  background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
Начально:   repeat
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Не поддерживается

Если задан графический образ фона, то свойство background-repeat задает повтор фонового образа при отображении. Его возможные значения:

repeat Образ повторяется по горизонтали и вертикали.
repeat-x Образ повторяется только по горизонтали.
repeat-y Образ повторяется только по вертикали.
no-repeat Образ не повторяется: отображается только одна его копия.

Пример:

BODY {
  background: white url("image.gif");
  background-repeat: repeat-y;
  background-position: center;
}

2.7.2.4. Прокрутка фонового образа: свойство background-attachment

Синтаксис:  background-attachment: scroll | fixed | inherit
Начально:   scroll
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Не поддерживается

Если задан графический образ фона, то свойство background-attachment задает прокрутку фонового образа при отображении. Его возможные значения:

scroll Образ прокручивается вместе с документом.
fixed Образ зафиксирован и не прокручивается.

Пример:

BODY {
  background: white url("image.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

2.7.2.5. Позиция фонового образа: свойство background-position

Синтаксис:  background-position: [[<размер> | <процент>] {1,2} |
                                 [[top | center | bottom] ||
                                 [left | center | right]]] | inherit
Начально:   0% 0%
Применимо:  к блочным и внешним элементам
Наследуемо: нет
Проценты:   относительно размеров объемлющего прямоугольника
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Не поддерживается

Если задан графический образ фона, то свойство background-position задает позицию фонового образа при отображении. Его возможные значения:

<размер> <размер> Если эта пара значений равна "2cm 3cm", то левый верхний угол образа помещается на 2 см правее и 3 см ниже левого верхнего угола области заполнителя.
<процент> <процент> Если эта пара значений равна "0% 0%", то левый верхний угол образа совмещается с левым верхним углом области заполнителя. Если эта пара значений равна "100% 100%", то правый нижний угол образа совмещается с правым нижним углом области заполнителя. Если эта пара значений равна "10% 80%", то левый верхний угол образа помещается на 10% правее и 80% ниже левого верхнего угола области заполнителя.

Если задано только одно значение, то оно считается позицией по горизонтали, а позиция по вертикали принимается равной 50%. Если даны два значения, то позиция по горизонтали стоит первой. Разрешаются комбинации размеров и процентов, например "2cm 30%". Отрицательные позиции также допустимы. Кроме того, значение этого свойства может задаваться следующими комбинациями ключевых слов (и только ими):

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%".

Пример:

BODY {
  background-image: url("banner.jpg");
  background-position: top center;
}

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

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

2.7.2.6. Свойства фона: свойство background

Синтаксис:  background: [<background-color> || <background-image> ||
                        <background-repeat> || <background-attachment> ||
                        <background-position>] | inherit
Начально:   не определено для сокращений
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   применимы только в <background-position>
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Не поддерживается

Свойство background является сокращением для свойств background-color, background-image,
background-repeat, background-attachment и background-position. Оно позволяет задать все свойства фона одновременно. При этом сначала всем свойствам фона присваиваются их начальные значения, а затем изменяются значения тех свойств, которые явно заданы в данном свойстве.

В первом правиле следующего примера задается только цвет фона, во втором указаны все свойства фона:

BODY { background: blue }
P { background: url("bkgrd.gif") gray 50% repeat fixed }

Примечание. Во избежании конфликта с пользовательской таблицей стилей, это свойство следует задавать вместе со свойством color.