#dbe687 шестнадцатеричный код цветов

Свойство opacity

С

²Ã¾Ã¹ÃÂÃÂòþ CSS 3 opacity ÷ðôðõà÷ýðÃÂõýøõ ÿÃÂþ÷ÃÂðÃÂýþÃÂÃÂø ø òðÃÂÃÂøÃÂÃÂõÃÂÃÂàþà0 ôþ 1, óôõ ýþûàÃÂÃÂþ ÿþûýðàÿÃÂþ÷ÃÂðÃÂýþÃÂÃÂàÃÂûõüõýÃÂð, ð õôøýøÃÂð, ýðþñþÃÂþÃÂ, ýõÿÃÂþ÷ÃÂðÃÂýþÃÂÃÂÃÂ. ã ÃÂòþùÃÂÃÂòð opacity õÃÂÃÂàþÃÂþñõýýþÃÂÃÂàâ ÿÃÂþ÷ÃÂðÃÂýþÃÂÃÂàÃÂðÃÂÿÃÂþÃÂÃÂÃÂðýÃÂõÃÂÃÂàýð òÃÂõ ôþÃÂõÃÂýøõ ÃÂûõüõýÃÂÃÂ, ø þýø ýõ üþóÃÂàÿÃÂõòÃÂÃÂøÃÂà÷ýðÃÂõýøõ ÿÃÂþ÷ÃÂðÃÂýþÃÂÃÂø ÃÂòþõóþ ÃÂþôøÃÂõûÃÂ. ÃÂþûÃÂÃÂðõÃÂÃÂÃÂ, ÃÂÃÂþ ýõÿÃÂþ÷ÃÂðÃÂýÃÂù ÃÂõúÃÂàýð ÿþûÃÂÿÃÂþ÷ÃÂðÃÂýþü ÃÂþýõ ñÃÂÃÂàýõ üþöõà(ÿÃÂøüõÃÂà2).

ÃÂÃÂøüõà2. ÃÂÃÂÿþûÃÂ÷þòðýøõ opacity

XHTML 1.0CSS 2.1CSS 3IECrOpSaFx

àõ÷ÃÂûÃÂÃÂðàÿÃÂøüõÃÂð ÿþúð÷ðý ýð ÃÂøÃÂ. 5.

àøÃÂ. 5. ÃÂþûÃÂÿÃÂþ÷ÃÂðÃÂýþÃÂÃÂàÃÂõúÃÂÃÂð ø ÃÂþýð

àInternet Explorer ôþ òõÃÂÃÂøø 8.0 òúûÃÂÃÂøÃÂõûÃÂýþ opacity ýõ ÃÂðñþÃÂðõÃÂ, ÿþÃÂÃÂþüàôûàýõóþ øÃÂÿþûÃÂ÷ÃÂõÃÂÃÂàÃÂÿõÃÂøÃÂøÃÂýþõ ôûàÃÂÃÂþóþ ñÃÂðÃÂ÷õÃÂð ÃÂòþùÃÂÃÂòþ filter. ÃÂÃÂÃÂõÃÂÃÂòõýýþ, þýþ ÿÃÂøòþôøàú ýõòðûøôýþüàúþôàCSS.

PNG в качестве фона

В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате PNG-24 (рис. 1). Особенностью этого формата является поддержка 256 уровней прозрачности, или попросту говоря, он умеет отображать полупрозрачные картинки.

Рис. 1. Изображение для создания фона

После чего добавляем рисунок в качестве фона через свойство background, как показано в примере 1.

Пример 1. Использование полупрозрачного рисунка

XHTML 1.0CSS 2.1IECrOpSaFx

Результат данного примера показан на рис. 3.

Рис. 2. Применение фонового рисунка

Устаревший браузер Internet Explorer 6 не работает с полупрозрачностью в PNG-24, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.

Приведенный метод имеет ряд ограничений. Так, при отключении картинок в браузере, фон исчезнет вообще. К тому же не так легко изменить цвет фона и значение прозрачности, для этого придется опять редактировать изображение.

RGBA

Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.

background-color: rgba(r, g, b, a);

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

Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter, но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.

Пример 3. Использование RGBA

HTML5CSS3IECrOpSaFx

Результат примера можно посмотреть на рис. 6.

Рис. 6. Полупрозрачный фон с непрозрачным текстом

Сравните картинку с предыдущей, буквы стали ярче и четче.

В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.

Решается это заменой свойства background-color на background.

background

Список источников

• htmlbook.ru