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

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

Смотрите в раздел об обозначения цвета описания синтаксиса корректных значений цвета.

1. Цвет переднего плана: свойства ‘color’

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

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

Пример(ы):

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

2. Фон

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

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

Фон корневого элемента становится фоном области представления и охватывает всю область представления, привязанную (для свойства ‘background-position’) к той же точке, что и если бы она был прорисована только для самого корневого элемента. Корневой элемент не прорисовывает этот фон снова.

Для HTML-документов, однако, рекомендуется авторам определять фон для элемента BODY, а не для элемента HTML. При прорисовке фона для области представления для HTML-документов, в которых корневой элемент HTML имеет вычисляемое значение ‘transparent’ для свойства ‘background-color’ и ‘none’ – для свойства ‘background-image’, агенты пользователей должны вместо них использовать вычисляемое значение этих свойств для первого дочернего элементы BODY этого элемента HTML, и не должны прорисовывать фон для элемента BODY. Такой фон так же должен быть привязан к той же точке, что и если бы он был прорисован только для корневого элемента. Это не применяется к XHTML-документам.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <TITLE>Определение фона области представления</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://example.com/мрамор.png") }
    </STYLE>
    <P>Мой фон – мраморный.

Примите во внимание, что правило для элемента BODY будет работать, даже если тэг BODY был упущен в исходном коде HTML, с момента, когда анализатор синтаксиса HTML выведет недостающий тэг.

Фон элемента, формирующего позиционный контекст (см. описание свойства ‘z-index’), прорисовывается внизу позиционного контекста элемента ниже чего-го в этом позиционном контексте.

2.1 Свойства фона: ‘background-color’, ‘background-image’, ‘background-repeat’, ‘background-attachment’, ‘background-position’ и ‘background’

‘background-color’
Значение:   <цвет> | transparent | inherit
Начальное значение:   transparent
Область применения:   все элементы
Наследование:   нет
Процентное задание значений:   Н/Д
Устройства:   визуальные
Вычисляемое значение:   как определено

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

Пример(ы):

h1 { background-color: #F00 }
‘background-image’
Значение:   <uri> | none | inherit
Начальное значение:   none
Область применения:   все элементы
Наследование:   нет
Процентное задание значений:   Н/Д
Устройства:   визуальные
Вычисляемое значение:   абсолютный URI или ‘none’

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

Значениями для данного свойства являются либо “><uri>, для определения изображения, либо ‘none’, когда не используется изображение.

Пример(ы):

body { background-image: url("мрамор.png") }
p { background-image: none }

Внутренние размеры, заданные как процентное соотношение, должны быть решены относительно размеров прямоугольника, который создает систему координат для свойства ‘background-position’.

Если изображение не имеет внутренних размеров, а имеет внутреннее соотношение, то должно считаться, что оно имеет наибольшие размеры с данным соотношением, которые не превышают размеры прямоугольника, который устанавливает систему координат для свойства ‘background-position’.

Если изображение не имеет и внутреннего соотношения, то должно считаться, что оно имеет размеры прямоугольника, который устанавливает систему координат для свойства ‘background-position’

‘background-repeat’
Значение:   repeat | repeat-x | repeat-y | no-repeat | inherit
Начальное значение:   repeat
Область применения:   все элементы
Наследование:   нет
Процентное задание значений:   Н/Д
Устройства:   визуальные
Вычисляемое значение:   как определено

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

Мозаика и позиционирование фоновых изображений в строковых элементах не определяется в данной спецификации. Будущие уровни CSS могут определить мозаику и позиционирование фоновых изображений в строковых элементах.

Значения имеют следующий смысл:

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

Пример(ы):

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

   

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

‘background-attachment’
Значение:   scroll | fixed | inherit
Начальное значение:   scroll
Область применения:   все элементы
Наследование:   нет
Процентное задание значений:   Н/Д
Устройства:   визуальные
Вычисляемое значение:   как определено

 

 

Если задано фоновое изображение, то данное свойство определяет, будет ли оно фиксироваться относительно области просмотра (‘fixed’) или будет перемещаться вместе с контейнером при его прокрутке (‘scroll’).

Примите во внимание, что есть только одна область просмотра на просмотр. Если элемент имеет механизм прокрутки (см. ‘overflow’), то фон со значением ‘fixed’ не будет перемещаться с элементом, а фон со значением ‘scroll’ не будет перемещаться с механизмом прокрутки.

Даже если изображение зафиксировано, оно остается видимым только тогда, когда находится в области содержимого, отступов или границ элемента. Поэтому изображение может оставаться невидимым до тех пор, пока его копии не будут расположены мозаикой (‘background-repeat: repeat’).

Пример(ы):

В следующем примере формируется бесконечная вертикальная полоса, которая остается “приклеенной” к области просмотра во время прокрутки элемента.

body {
  background: red url("pendant.png");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

Агентам пользователей, которые не поддерживают фон со значением ‘fixed’ (например из-за ограниченных возможностей оборудования), следует игнорировать объявления с ключевым словом ‘fixed’. Например:

body {
  background: white url(paper.png) scroll; /* для всех агентов пользователей */
  background: white url(ledger.png) fixed; /* для агентов пользователей, которые могут фиксировать фон  */
}

Подробную информацию можно получить в разделе о соответствии.

‘background-position’
Значение:   [ [ <проценты> | <длина> | left | center | right ] [ <проценты> | <длина> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
Начальное значение:   0% 0%
Область применения:   все элементы
Наследование:   нет
Процентное задание значений:   относительно размера самого блока
Устройства:   визуальные
Вычисляемое значение:   для <длины> – абсолютное значение, в других случаях – процентное соотношение

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

“><проценты> “><проценты>
С парой значений ‘0% 0%’, верхний левый угол изображения выравнивается с верхним левым углом края отступов блока. С парой значений ‘100% 100%’ нижний правый угол изображения помещается в нижний правый угол области отступов. С парой значений ‘14% 84%’, точка, смещенная вдоль изображения на 14% вправо и на 84% вниз помещается в точку, смещенную вдоль области отступов, на 14% вправо и на 84% вниз.
“><длина> “><длина>
С парой значений ‘2cm 1cm’, верхний левый угол изображения помещается на 2 см правее и на 1 см ниже верхнего левого угла области отступов.
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’ или ‘center 2cm’ или ‘center 10%’). Для комбинации ключевого слова с другими значениями, не являющимися ключевыми словами, ‘left’ и ‘right’ могут использоваться только в качестве первого значения, а ‘top’ и ‘bottom’ – могут использоваться только в качестве второго значения. Отрицательные положения допускаются.

Пример(ы):

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% */

Мозаика и позиционирование фоновых изображений в строковых элементах не определяется в данной спецификации. Будущие уровни CSS могут определить мозаику и позиционирование фоновых изображений в строковых элементах.

Если фоновое изображение зафиксировано в области просмотра (см. описание свойства ‘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 }

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

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

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

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

“Применить гамму” означает, что каждой из трех составляющих R, G и B перед тем, как она будет передана операционной системе, должно быть присвоено значение R’=Rгамма, G’=Gгамма, B’=Bгамма.

Это можно быстро сделать, осуществив однократное построение 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

Добавить комментарий

Вам надо войти, чтобы написать комментарий.