На главную страницу
Форум txt.version   




Статья :: Цвета и фон

14  Цвета и фон

Свойства 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
Носитель:визуальный

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

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

Пример(ы):

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

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

<percentage> <percentage>
Если пара значений - '0% 0%', то верхний левый угол изображения выровнен с левым верхним углом кромки заполнения бокса. Пара значений '100% 100%' помещает нижний правый угол изображения в нижний правый угол области заполнения. Если пара значений - '14% 84%', точка изображения 14% поперёк и 84% вниз помещается в точку 14% поперёк и 84% вниз области заполнения.
<length> <length>
Если пара значений - '2cm 2cm', то верхний левый угол изображения помещается на 2cm вправо и на 2cm вниз от верхнего левого угла области заполнения.
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'>] | 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 ([PNG10]).

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

PC, использующий MS-Windows
none
Unix, использующий X11
none
Mac, использующий QuickDraw
применяет гамму 1.45 [ICC32] (приложения ColorSync-savvy могут просто передавать профиль sRGB ICC в ColorSync для выполнения необходимой коррекции цвета)
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

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

 

Цвета и фон

страницы в данном разделе 
 О спецификации CSS2  Полное описание анонимного бокса блока
 Звуковые таблицы стилей  Полное описание первого примера форматирования Bach/XML
 Полное описание второго примера форматирования Bach/XML  Полное описание моделей фона
 Модель бокса  Полное описание иллюстрации областей бокса
 Полное описание примера бокса-списка, показывающего поля,заполнения и рамки  Установка значений свойств, Каскадирование и Наследование
 Полное описание примера вычисления рядав таблицы и вертикального выравнивания ячеек  Пример баннера
 Приложение B: Изменения по сравнению с CSS1  Полное описание примера сжатия областей
 Цвета и фон  Соответствие: требования и рекомендации
 Полное описание примера, иллюстрирующего скрытые внутренние рамки  Индекс дескрипторов
 Полное описание диаграммы примера дерева документа  Полное описание примера оттенения текста
 Полное описание примера зависающей заглавной буквы.  Полное описание примера пунктуации и зависающей заглавной буквы
 Полное описание примера перекрывания поплавком элементов с нормальным расположением  Полное описание примера того, как поплавки перекрывают боксы с нормальным расположением
 Полное описание примера поплавка и обтекания текста  Полное описание примера, иллюстрирующего позиционирование относительно позионированного предка
 Полное описание примера, иллюстрирующего абсолютное позиционирование  Полное описание примера, иллюстрирующего всплывание без 'clear'
 Полное описание примера всплывания с 'clear'  Полное описание примера всплывания
 Полное описание примера нормального расположения  Полное описание примера относительного позиционирования
 Полное описание примера абсолютного позиционирования относительно начального содержащего блока  Шрифты
 Полное описание примера фрэймоподобной структуры  Генерируемое содержимое, автоматическая нумерация и списки
 Приложение D: Грамматика CSS2  Каскадные Таблицы Стилей, Уровень 2
 Индекс  Полное описание поведения полей/рамок в разделённом инлайн-боксе
 CSS2 Введение  Полное описание форм шрифта italic
 Полное описание кернинга  Полное описание примера расположения заголовка слева от таблицы
 Полное описание примера маркёров inside относительно outside  Типы носителя
 Приложение С: Замечания по реализации и выполнению для шрифтов  Полное описание примера несжимаемого 'overflow'
 Полное описание примера сжимаемого 'overflow'  Полное описание примера соотношений между страничным боксом и листом (бумаги)
 Страничные носители  Полное описание изображения GUI Windows 95 с описанием шрифтов
 Полное описание иллюстрации к определению пиксела  Полное описание соотношений с пикселом выводного устройства
 Индекс свойств  Ссылки
 Приложение А: Образец таблицы стилей для HTML 4.0  Селекторы
 Синтаксис CSS2 и базовые типы данных  table-overlap-desc.html
 Полное описание таблицы расходов на путешествие  Таблицы
 Полное описание примера приоритетов модели сжимающихся рамок  Полное описание примера вычисления фона
 Полное описание примера расчёта фона ячеек  Полное описание примера рядов, разделённых горизонтальными линиями рамки
 Полное описание примера модели раздельных рамок  Полное описание примера, иллюстрирующего модель сжимающихся рамок
 Текст  Полное описание примера заголовка над таблицей
 Интерфейс пользователя  Модель визуального форматирования. Детали.
 Визуальные эффекты  Модель визуального форматирования


Разделы
Околокомпьютерная литература (375)
Программирование (102)
Программы (75)
ОС и Сети (49)
Интернет (29)
Аппаратное обеспечение (16)
Базы данных (6)

Содержание сайта (выборка)
Apache
Протоколы TCP/IP (принципы, протоколы и архитектура)

PHP, PELR, JSP
PHP
JavaServer Pages (JSP)

Базы данных
Основы mysql
СУБД INFORMIX
СУБД POSTGRES
Основы проектирования реляционных баз данных

HTML, javascript
Спецификация HTML 4.01
Каскадные Таблицы Стилей, Уровень 2
Клиентский JavaScript. Справочник.
JavaScript руководство пользователя
Серверный JavaScript 1.4. Руководство по Использованию.

Паскаль, C, C++, C#
GCC (примеры)
FAQ Валентинa Озеровa DELPHI
C





 
©  programming-lang.com  справочник программиста