Документация

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

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

14 Цвета и фон

Содержание

14.1 Цвета переднего плана: свойство 'color'
14.2 Фон
- 14.2.1 Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background'
14.3 Гамма-коррекция

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

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

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

'color'

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

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

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

14.2 Фон

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

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

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

свойства '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'. Дополнительную информацию можно получить в разделе, посвященном конформности.

'background-position'

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

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

<проценты> <проценты>: Если используется пара значений '0% 0%', то верхний левый угол изображения выравнивается относительно верхнего левого угла краевой линии отступов на 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% 2cm'). Также допускается использование отрицательных значений. Ключевые слова не могут использоваться вместе со значениями длины или процентными соотношениями (все возможные варианты представлены выше).

  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'=R^gamma, G'=G^gamma, B'=B^gamma.

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

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

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

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

Приглашаем посетить сайты

Мода Чехов Крылов Автомобили Барокко Просвещение Культурология Спорт Пушкин CSS