Книга: JavaScript. Подробное руководство, 6-е издание

16.2.5. Цвет, прозрачность и полупрозрачность

16.2.5. Цвет, прозрачность и полупрозрачность

Цвет текста, содержащегося в элементе документа, можно задать с помощью CSS-свойства color. Цвет фона любого элемента - с помощью свойства background-color. Выше мы видели, что цвет рамки элемента можно задать с помощью свойства border-color или сокращенной формы его написания border.

При обсуждении рамок мы рассматривали пример, в котором цвет рамки задавался указанием названий наиболее распространенных цветов, таких как «red» (красный) и «black» (черный). Стандарт CSS поддерживает множество таких обозначений цветов на английском языке, но имеется более универсальный способ определения цветов, который заключается в использовании шестнадцатеричных цифр, определяющих красную, зеленую и синюю составляющие цвета. Значения каждой из составляющих могут задаваться одной или двумя цифрами. Например:

#000000 /*черный */ 
#fff /*белый */ 
#f00 /*ярко-красный */
#404080 /*ненасыщенный темно-синий */
#ccc /*светло-серый */

Стандарт CSS3 дополнительно определяет возможность определения цвета в формате RGBA (значения красной, зеленой и синей составляющих плюс альфа-значение, определяющее степень прозрачности). Формат RGBA поддерживается всеми современными броузерами, кроме IE; ожидается, однако, что его поддержка будет включена в IE9. CSS3 также определяет поддержку форматов HSL (hue-saturation-value - тон-насыщенность-яркость) и HSLA. И снова эти форматы поддерживаются броузерами Firefox, Safari и Chrome, но не поддерживаются IE.

Таблицы CSS позволяют точно указать позицию, размеры, цвета фона и рамки элемента, что обеспечивает элементарные графические средства рисования прямоугольников и (если до предела уменьшить высоту или ширину) горизонтальных или вертикальных линий. В предыдущее издание книги был включен пример рисования столбчатых диаграмм средствами CSS, но в этом издании он был заменен расширенным описанием элемента <canvas>. (Подробнее о работе с графикой на стороне клиента рассказывается в главе 21.)

В дополнение к атрибуту background-color можно также указать изображение, которое должно использоваться в качестве фоновой картинки элемента. Свойство background-image определяет фоновое изображение, а свойства background-attachment, background-position и background-repeat уточняют некоторые параметры рисования изображения. Сокращенная форма записи - свойство background, позволяющее указывать все эти атрибуты вместе. Свойства, определяющие фоновый рисунок, могут применяться для создания довольно интересных визуальных эффектов, но это уже выходит за рамки темы данной книги.

Очень важно понимать, что если цвет фона или фоновый рисунок элемента не задан, то фон элемента обычно прозрачный. Например, если поверх некоторого текста в обычном потоке вывода документа расположить элемент <div> с абсолютным позиционированием, то по умолчанию текст будет виден через элемент <div>. Если же элемент <div> содержит собственный текст, символы окажутся наложенными друг на друга, образуя трудную для чтения мешанину. Однако не все элементы по умолчанию прозрачны. Например, элементы форм выглядели бы нелепо с прозрачным фоном, и такие элементы, как <button>, имеют цвет фона по умолчанию. Переопределить значение цвета по умолчанию можно с помощью свойства background-color; при необходимости можно явно установить цвет фона прозрачным («transparent»).

Прозрачность, о которой мы до сих пор говорили, может быть либо полной, либо нулевой: элемент имеет либо прозрачный, либо непрозрачный фон. Однако существует возможность получить полупрозрачный элемент (для содержимого как заднего, так и переднего плана). (Пример полупрозрачного элемента приведен на рис. 16.3.) Делается это с помощью свойства opacity, определяемого стандартом CSS3. Значением этого свойства является число в диапазоне от 0 до 1, где 1 означает 100-процентную непрозрачность (значение по умолчанию), а 0 - 100-процентную прозрачность. Свойство opacity поддерживается всеми текущими броузерами, кроме IE. В IE аналогичная функциональность реализуется с помощью специфичного свойства filter. Чтобы сделать элемент непрозрачным на 75%, можно воспользоваться следующими CSS-стилями:

opacity: .75;              /* стандартный стиль прозрачности в CSS3 */
filter: alpha(opacity=75); /* прозрачность в IE; обратите внимание */
                           /* на отсутствие десятичной точки */

Оглавление книги