2. Opacity

В CSS 3 для задания прозрачности предлагается применять параметр opacity со значениями от нуля (прозрачный) до единицы (непрозрачный) и значение rgba(r,g,b,a) для параметра background или background-color. В от обычного значения вида rgb(r, g, b) значение вида rgba(r,g,b,a) позволяет кроме уровней r, g, b яркости красной, зеленой и синей составляющих цвета задать еще и уровень прозрачности а (так называемый альфа-канал) со значениями от ну­ля (прозрачный) до единицы (непрозрачный). Параметр opacity устанавливает уровень прозрачности всего элемента, к которому применяется (например, графи­ческого изображения, элемента <div> и др.), а значение вида rgba(r,g,b,а) устанавливает лишь прозрачность цвета фона.

ПРИМЕЧАНИЕ. Браузер Internet Explorer версии 8 и более ранних не поддерживает задание прозрачно­сти в соответствии с CSS 3 и просто игнори­рует параметр opacity и значение вида rgba(r,g,b,а). Чтобы задать уровень прозрачности для Internet Explorer 5.5+, необ­ходим графический фильтр - фирменное расширение CSS, которое не поддерживают другие браузеры. Задать фильтр можно двумя способами:

• filter:alpha(opacity=число);

• filter: progid: DXImageTransform. Microsoft.Alpha(opacity=число)

Здесь число от 0 до 100 (а не до 1) - уро­вень прозрачности.

Параметр opacity и значение вида rgba(r,g,b,а) поддерживают современ­ные версии браузеров Firefox, Opera, Safari и Chrome.

В листинге 2 в качестве примера приве­ден код документа с тремя графическими изображениями, которые частично перекры­ваются. Для всех картинок установлен уро­вень прозрачности 0,5.

Данный код будет работать во всех современных браузерах. В Firefox, Opera, Safari и Chrome сработает параметр opacity:0,5, а в Internet Explorer — filter:alpha(opacity=50). Обратите внимание, что часть HTML-кода с параметрами CSS для Internet Explorer выделена спе­циальным образом. Другие браузеры проигнорируют ее. На рис. показан вид в браузере документа с тремя изображениями игральных карт, когда прозрачность р авна 1 и когда она равна 0,5.

Листинг 2.

Н а следующем рис. показан пример, в котором элемент <div> с параметром прозрачно­сти 0,6 черного цвета расположен поверх графического изображения. Если цвет фона для <div> не указать, то эффект полупрозрачности не получится.

Если контейнер <div> содержит другие элементы (например, картинки, текст и т. д.) и для него задан уровень прозрачности, то последний будет действовать на все со­держимое данного контейнера. С другой стороны, полупрозрачные элементы внутри контейнера останутся полупрозрачными, если контейнер сделать непрозрачным.

О дна из типичных задач применения свойства прозрачности - создание полупро­зрачной тени, отбрасываемой элементом, например <div> или <img>.

В Листинге 3 приведен пример, в котором панель отображается с тенью на фоне картинки. Такую панель создают посредством трех элементов <div>. Первый из них- контейнер, включающий в себя остальные два, из которых один представляет лицевую сторону (face) панели, а другой - полупрозрачный прямоугольник, изо­бражающий тень (shadow) от панели. Лицевая сторона и ее тень - равновеликие прямоугольники, но "теневой" прямоугольник сдвинут относительно лицевого впра­во и вниз (будто бы источник света находится в верхнем левом углу) благодаря по­ложительному значению координаты left, отрицательному значению координаты top и параметру position:relative. В данном примере ширина тени равна 10рх, хотя в типичных дизайнерских решениях ее задают в пределах 2-5 рх. Общий кон­тейнер (<div class="pane">) позиционирован абсолютно (position: absolute) и его расположение на экране задают параметры left и top. При этом элементы его содержимого (<div class="face"> и <div class="shadow">) позиционируются на экране, сохраняя заданное положение друг относительно друга. Обратите внимание, что лицевая сторона панели имеет большее значение параметра z-index, чем теневая. Общему контейнеру (<div class="pane">) назначены нулевые размеры.