Содержание
Свойства CSS позволяют авторам определять цвет переднего плана и фон элемента. Фоном может быть цвет или изображение. Свойства фона позволяют авторам разместить фоновое изображение, повторить его, и описать следует ли его зафиксировать относительно области просмотра или прокручивать вместе с документом.
Смотрите в раздел об обозначения цвета описания синтаксиса корректных значений цвета.
| Значение: | <цвет> | inherit |
| Начальное значение: | зависит от агента пользователя |
| Область применения: | все элементы |
| Наследование: | да |
| Процентное задание значений: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | как определено |
Данное свойство описывает цвет переднего плана текстового содержимого элемента. Есть различные способы назначить красный цвет:
em { color: red } /* стандартное название цвета */
em { color: rgb(255,0,0) } /* значение системы RGB из диапазона 0-255 */
Авторы могут определить фон элемента (т.е. его область представления) либо как цвет, либо как изображение. В терминах блочной модели, "фон" относится к фону областей содержимого, отступов и границ. Цвет и стиль границ устанавливается свойствами границ. Поля всегда прозрачны.
Свойства фона не наследуются, но фон родительского блока по-умолчанию будет виден поскольку начальное значение свойства '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'), прорисовывается внизу позиционного контекста элемента ниже чего-го в этом позиционном контексте.
| Значение: | <цвет> | transparent | inherit |
| Начальное значение: | transparent |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | как определено |
Данное свойство определяет цвет фона элемента, либо значение <цвета>, либо ключевое слово 'transparent', благодаря которому все цвета, лежащие под элементом, становятся видными..
h1 { background-color: #F00 }
| Значение: | <uri> | none | inherit |
| Начальное значение: | none |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | абсолютный URI или 'none' |
Данное свойство устанавливает фоновое изображение элемента. Когда устанавливается фоновое изображение, авторам следует устанавливать цвет фона, который будет использоваться в случае, когда изображение невидимо. Когда изображение представлено, оно будет отображаться поверх фонового цвета. (Таким образом, цвет будет виден сквозь прозрачные области изображения).
Значениями для данного свойства являются либо <uri>, для определения изображения, либо 'none', когда не используется изображение.
body { background-image: url("мрамор.png") }
p { background-image: none }
Внутренние размеры, заданные как процентное соотношение, должны быть решены относительно размеров прямоугольника, который создает систему координат для свойства 'background-position'.
Если изображение не имеет внутренних размеров, а имеет внутреннее соотношение, то должно считаться, что оно имеет наибольшие размеры с данным соотношением, которые не превышают размеры прямоугольника, который устанавливает систему координат для свойства 'background-position'.
Если изображение не имеет и внутреннего соотношения, то должно считаться, что оно имеет размеры прямоугольника, который устанавливает систему координат для свойства 'background-position'
| Значение: | repeat | repeat-x | repeat-y | no-repeat | inherit |
| Начальное значение: | repeat |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | как определено |
Если определено фоновое изображение, то данное свойство определяет будет ли оно дублироваться (в виде мозаики) и каким образом. Все мозаики охватывают области содержимого, отступов и границ блока.
Мозаика и позиционирование фоновых изображений в строковых элементах не определяется в данной спецификации. Будущие уровни CSS могут определить мозаику и позиционирование фоновых изображений в строковых элементах.
Значения имеют следующий смысл:
body {
background: white url("pendant.png");
background-repeat: repeat-y;
background-position: center;
}
Одна копия изображения центрируется, и остальные копии помещаются ниже и выше его, так что создается вертикальная полоса позади элемента.
| Значение: | 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; /* для агентов пользователей, которые могут фиксировать фон */
}
Подробную информацию можно получить в разделе о соответствии.
| Значение: | [ [ <проценты> | <длина> | left | center | right ] [ <проценты> | <длина> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit |
| Начальное значение: | 0% 0% |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | относительно размера самого блока |
| Устройства: | визуальные |
| Вычисляемое значение: | для <длины> – абсолютное значение, в других случаях – процентное соотношение |
Если определено фоновое изображение, то данное свойство определяет его начальное положение. Значения имеют следующий смысл:
Если задано только одно процентное значение или значение длины, то оно определяет только горизонтальное положение, а вертикальное положение будет равно 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 могут определить мозаику и позиционирование фоновых изображений в строковых элементах.
Если фоновое изображение зафиксировано в области просмотра (см. описание свойства ), то изображение помещается относительно области просмотра вместо размещения относительно области отступов элемента. Например,
body {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
В примере, приведенном выше, (одиночное) изображение помещается в нижний правый угол области просмотра.
| Значение: | [<'background-color'> || <'background-image'> || <'background-repeat'> || || <'background-position'>] | inherit |
| Начальное значение: | см. каждое свойство в отдельности |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание значений: | допустимо в 'background-position' |
| Устройства: | визуальные |
| Вычисляемое значение: | см. каждое свойство в отдельности |
Свойство 'background' является стенографическим для определения индивидуальных свойств фона (т.е., 'background-color', 'background-image', 'background-repeat', и 'background-position') в одном месте в таблице стилей.
Давая корректное объявление, свойство 'background' сначала устанавливает всем отдельным свойствам фона их начальные значения, а затем явно назначает им те значения, которые были заданы в объявлении.
В первом правиле в приведенном ниже примере, задается только значение для свойства 'background-color', а все остальные отдельные свойства принимают свои начальные значения. Во втором правиле, определены все отдельные свойства.
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }
Информацию о цветовой гамме можно найти в учебнике под названием "Gamma Tutorial" в спецификации PNG ([PNG]).
Примечание. При вычислении гамма-коррекции агенты пользователей, осуществляющие отображение на дисплеях с ЭЛТ, могут предполагать идеальность используемой ЭЛТ и игнорировать все эффекты, имеющие место в текущей цветовой гамме из-за внесенных в нее возмущений. Поэтому на имеющихся в данный момент платформах минимум, что им следует сделать:
"Применить гамму" означает, что каждой из трех составляющих 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
что позволит сократить количество абстрактных математических расчетов, приходящихся на один атрибут цвета, и еще больше сократить их при вычислении одного пиксела.