Цвета и фон

Свойства CSS дозволяют авторам специфицировать цвет переднего плана и фона элементов. В качестве фона применяется цвет либо изображение. Свойства фона разрешают авторам позиционировать фоновое изображение, размножать его и объявлять как фиксированное касательно порта просмотра либо прокручивать совместно с документом.

14.1 Цвет переднего плана: качество 'color'

'color'

Значение:	<color> \| inherit
Начальное:	зависит от пользовательского агента (ПА)
Применяется:	ко каждому элементам
Наследуется:	да
Процентное:	N/A
Носитель:	визуальный

Это качество описывает цвет переднего плана содержимого текста элемента. Дозволено по различному специфицировать алый цвет:

EM { color: red }              /* предопределённое наименование цвета */
EM { color: rgb(255,0,0) }     /* диапазон RGB 0-255   */

14.2 Фон

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

Свойства фона не наследуются, но фон бокса-прародителя будет по умолчанию просвечивать, от того что исходное значение 'background-color' - 'transparent'.

Фон бокса, генерируемый корневым элементом, покрывает всю канву.

Для документов HTML, впрочем, мы рекомендуем, дабы авторы специфицировали фон элемента BODY, а не элемента HTML.
ПА обязаны рассматривать следующие правила приоритета при заполнении фона: если значение свойства 'background' для элемента HTML хорошо от 'transparent', тогда используйте его, в другом случае - используйте значение свойства 'background' элемента BODY. Если результирующее значение - 'transparent', то представление не определено.

В соответствии с этими правилами, канва дальнейшего документа HTML будет иметь фон "marble":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Установка фона канвы</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://style.com/marble.png") }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Мой фон - marble.
  </BODY>
</HTML>

14.2.1 Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background'

'background-color'

Значение:	<color> \| transparent \| inherit
Начальное:	transparent
Применяется:	ко каждым элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

Это качество устанавливает цвет фона элемента значением <color> либо ключевым словом 'transparent' (дабы сделать фон подложки просвечивающим).

H1 { background-color: #F00 }

'background-image'

Значение:	<uri> \| none \| inherit
Начальное:	none
Применяется:	ко каждому элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

Это качество устанавливает изображение-фон элемента. При установке изображения для фона авторам нужно также специфицировать цвет фона, тот, что будет применяться, если изображение окажется недостижимым. Если изображение доступно, оно выводится поверх цвета фона. (Таким образом, цвет фона будет виден в прозрачных участках изображения).

Значениями данного свойства являются <uri>, для спецификации изображения, либо 'none', если изображение не применяется.

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

'background-repeat'

Значение:	repeat \| repeat-x \| repeat-y \| no-repeat \| inherit
Начальное:	repeat
Применяется:	ко каждым элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

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

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

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%
Применяется:	к элементам яруса блока и к замещаемым элементам
Наследуется:	нет
Процентное:	относится к размеру самого бокса
Носитель:	визуальный

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

Если задано только одно значение, в процентах либо единицах измерения, то оно устанавливает только горизонтальную позицию, вертикальная позиция будет 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', а другие индивидуальные свойства установлены в свои исходные значения.
Во втором правиле все индивидуальные свойства специфицированы.

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 Коррекция цветовой гаммы

По вопросам цветовой гаммы проконсультируйтесь в Gamma Tutorial в спецификации PNG ([PNG10]).

При вычислении коррекции цветовой гаммы, ПА, выводящие на CRT, могут принять совершенный CRT и игнорировать всякие результаты внедряемой гаммы. Это обозначает, что минимальная обработка, нужная для нынешней платформы - :

"Использование гаммы" обозначает, что весь из трёх - R, G и B - обязан быть конвертирован в R'=R^gamma, G'=G^gamma, B'=B^gamma, раньше чем быть обработанным ОС.

Это дозволено стремительно исполнить путём однократного создания 256-элементной просмотровой таблицы при вызове браузера таким вот образом:

что после этого дозволяет исключить надобность непомерных вычислений для признака цвета, и ещё поменьше - через пикселные значения.

14 Цвета и фон

14.1 Цвет переднего плана: качество 'color'

14.2 Фон

14.2.1 Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background'

14.3 Коррекция цветовой гаммы