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

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

Помимо возможности задания цвета рамки с помощью такой нотации, существу_ ет также возможность задания цвета текста с помощью CSS_атрибута color. Кро_ ме того, для любого элемента можно определить цвет фона с помощью атрибута background_color. Таблицы CSS_стилей позволяют точно указать позицию, разме_ ры, цвета фона и рамки элемента, что обеспечивает элементарные графические средства рисования прямоугольников и (если до предела уменьшить высоту или ширину) горизонтальных или вертикальных линий. К этой теме мы еще вернем_ ся в главе 22, когда будут обсуждаться возможности рисования столбиковых диа_ грамм с использованием модели DOM API и позиционирования средствами CSS.

В дополнение к атрибуту background_color в качестве фоновой картинки элемента можно использовать графические изображения. Атрибут background_image опре_ деляет фоновое изображение, а атрибуты background_attachment, background_posi_ tion и background_repeat уточняют некоторые параметры рисования изображе_ ния. Сокращенный вариант – атрибут background, позволяющий указывать все эти атрибуты вместе. Атрибуты фонового рисунка могут применяться для созда_ ния довольно интересных визуальных эффектов, но это уже выходит за рамки темы данной книги.

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

текста в обычном потоке вывода документа расположить элемент <div> с абсолют_ ным позиционированием, то по умолчанию текст будет виден через элемент <div>. Если же элемент <div> содержит собственный текст, символы окажутся наложенными друг на друга, образуя трудную для чтения мешанину. Однако не все элементы по умолчанию прозрачны. Например, у элементов форм нет про_ зрачного фона, а такие элементы, как <button>, имеют цвет фона по умолчанию. Переопределить значение цвета по умолчанию можно с помощью атрибута back_ ground_color, можно также явно сделать цвет фона прозрачным, если в этом по_ явится необходимость.

Прозрачность, о которой мы до сих пор говорили, может быть либо полной, либо нулевой: элемент имеет либо прозрачный, либо непрозрачный фон. Однако су_ ществует возможность получить полупрозрачный элемент (для содержимого как заднего, так и переднего плана); пример полупрозрачного элемента приве_ ден на рис. 16.4. Делается это с помощью атрибута opacity стандарта CSS3. Зна_ чением этого атрибута является число в диапазоне от 0 до 1, где 1 означает 100_ процентную непрозрачность (значение по умолчанию), а 0 – 100_процентную прозрачность. Атрибут opacity поддерживается броузером Firefox. Ранние вер_ сии Mozilla поддерживали экспериментальный вариант этого атрибута с именем moz_opacity. В IE аналогичная функциональность реализуется с помощью специ_ фичного атрибута filter. Чтобы сделать элемент непрозрачным на 75%, можно воспользоваться следующими CSS_стилями: