Приглашаем посетить
Пушкин (pushkin-lit.ru)

Цвета и оформление фона

назад   далее   содержание   свойства   указатель  


14 Цвета и фон

Содержание

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

Информацию о синтаксисе корректных значений цветов можно найти в разделе о цветах.

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

'color'
Значение:  <цвет> | наследуемое
Начальное значение:  зависит от агента пользователя
Область применения:  все элементы
Наследование:  да
Процентное задание:  нет
Устройства:  визуального форматирования

Это свойство описывает цвет переднего плана текстового содержимого элемента. Например, существует несколько способов задания красного цвета:

Пример(ы):

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

14.2 Фон

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

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

Фон блока, порождаемого корневым элементом, покрывает всю область представления.

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

В соответствии с этими правилами область представления, лежащая в основе следующего HTML-документа, будет иметь "мраморный" фон:

<!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>Я использую мраморный фон.
  </BODY>
</HTML>

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

'background-color'
Значение:  <цвет> | transparent | наследуемое
Начальное значение:  transparent
Область применения:  все элементы
Наследование:  нет
Процентное задание:  нет
Устройства:  визуального форматирования

Это свойство устанавливает цвет фона элемента равным <цвет> или ключевому слову 'transparent', благодаря которому все цвета, лежащие под элементом, становятся видными.

Пример(ы):

H1 { background-color: #F00 }
'background-image'
Значение:  <uri> | none | наследуемое
Начальное значение:  none
Область применения:  все элементы
Наследование:  нет
Процентное задание:  нет
Устройства:  визуального форматирования

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

В качестве значения этого свойства может выступать <uri> графического объекта либо значение 'none', если изображение не используется.

Пример(ы):

BODY { background-image: url("marble.gif") }
P { background-image: none }
'background-repeat'
Значение:  repeat | repeat-x | repeat-y | no-repeat | наследуемое
Начальное значение:  repeat
Область применения:  все элементы
Наследование:  нет
Процентное задание:  нет
Устройства:  визуального форматирования

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

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

Пример(ы):

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

Фоновое изображение центрировано. Повторяется сверху вниз в областях содержимого и отступов

Одна копия фонового изображения расположена по центру, а другие копии располагаются сверху вниз, формируя тем самым вертикальную полосу позади элемента.

'background-attachment'
Значение:  scroll | fixed | наследуемое
Начальное значение:  scroll
Область применения:  все элементы
Наследование:  нет
Процентное задание:  нет
Устройства:  визуального форматирования

Если задано фоновое изображение, то данное свойство определяет, будет ли оно фиксироваться относительно окна просмотра (значение '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'
Значение:  [ [<проценты> | <длина> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | наследуемое
Начальное значение:  0% 0%
Область применения:  элементы структурного уровня и замещаемые элементы
Наследование:  нет
Процентное задание:   относительно размеров самого блока
Устройства:  визуального форматирования

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

<проценты> <проценты>
Если используется пара значений '0% 0%', то верхний левый угол изображения выравнивается относительно верхнего левого угла краевой линии отступов блока. Если задана пара значений '100% 100%', то нижний правый угол изображения помещается в нижний правый угол краевой линии отступов. Если задана пара значений '14% 84%', то точка, смещенная вдоль изображения на 14% вправо по горизонтали и на 84% вниз по вертикали помещается в точку, смещенную вдоль области, предназначенной для отступов, на 14% вправо по горизонтали и на 84% вниз по вертикали.
<длина> <длина>
Если задана пара '2cm 2cm', то верхний левый угол изображения помещается на 2 см правее и 2 см ниже верхнего левого угла области, предназначенной для отступов.
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'>] | наследуемое
Начальное значение:  не определено для свойств стенографического типа
Область применения:  все элементы
Наследование:  нет
Процентное задание:  допускается в свойстве '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 }

14.3 Гамма-коррекция

Информацию о цветовой гамме можно найти в учебнике под названием "Gamma Tutorial" в спецификации PNG ([PNG10]).

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

ПК с системой MS-Windows
ничего не требуется
Unix с использованием X11
ничего не требуется
Mac с использованием QuickDraw
применить цветовую гамму 1.45 [ICC32] (приложения, осуществляющие автономную синхронизацию цветов, могут просто передать профиль sRGB ICC в модуль синхронизации цветов для выполнения корректной настройки цветовой гаммы)
SGI с использованием X
применить цветовую гамму из /etc/config/system.glGammaVal (по умолчанию используется значение 1.70; приложения, работающие на Irix версии 6.2 и выше, могут просто передать профиль sRGB ICC в систему управления цветовой гаммой)
NeXT с NeXTStep
применить цветовую гамму 2.22

Фраза "применить цветовую гамму" означает, что каждой из трех составляющих R, G и B перед тем, как она будет передана операционной системе, должно быть присвоено значение R'=Rgamma, G'=Ggamma, B'=Bgamma.

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

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

Это позволит сократить количество абстрактных математических расчетов, приходящихся на один атрибут цвета, и еще больше сократить их при вычислении одного пиксела.


назад   далее   содержание   свойства   указатель