Традиционно цвета, используемые в CSS, имеют либо шестнадцатеричный формат, либо формат RGB, например rgb(171,205,239).
CSS3 предлагает некоторые новые способы работы с цветом, такие как использование HSL (оттенок, насыщенность, свет) и каналов непрозрачности/альфа. К сожалению, в настоящее время их полностью поддерживают только Firefox 3+, Chrome 1.0+ и Safari 3+, а также несколько производных браузеров. Но мы можем сделать все, что в наших силах, и IE не начнет поддерживать некоторые свойства CSS3 до выхода Internet Explorer 9.
Непрозрачность
На самом деле это старое свойство, и, что удивительно, оно поддерживается текущими версиями IE, хотя и более сложным способом.
Непрозрачность делает весь объект CSS прозрачным, а прозрачность всех дочерних элементов будет унаследована соответствующим образом. Официальный синтаксис следующий:
непрозрачность: [0–1 десятичный];
Таким образом, настройка opacity: 0.5; сделает объект прозрачным на 50%. Хотя новые браузеры активно поддерживают его, старые браузеры по-прежнему требуют некоторого специального кода, как и Internet Explorer.
В настоящее время для более старых версий Firefox нам необходимо использовать префикс -moz-, а для более старых версий Safari/Chrome — префикс -webkit-. Для более старых версий Safari, которые все еще используют ядро KHTML вместо ядра Webkit, нам нужно использовать -khtml-. Итак, если мы хотим поддерживать каждый браузер, наш код должен выглядеть так:
непрозрачность: 0,5;
-moz-непрозрачность: 0,5;
-webkit-opacity: 0,5;
-khtml-непрозрачность: 0,5;
Ах, подождите минутку! Что делать с ИЕ? Ну, IE вообще это не поддерживает, но использует фирменный фильтр. Традиционный метод краток и лаконичен:
фильтр: альфа (непрозрачность = 50);
Обратите внимание, что для IE нам нужно использовать целые числа от 0 до 100, а не десятичные числа, такие как атрибут opacity. К сожалению, Internet Explorer 8 предоставляет новый способ справиться с этой проблемой. Не пытайтесь запомнить это, как и другое, оно длинное:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
Конечно, если вы хотите поддерживать старые браузеры IE, вам придется использовать более короткий вариант, указанный выше, а это означает, что если вы хотите быть совместимым с большинством браузеров, вам понадобится в общей сложности шесть операторов CSS.
PS: Фактически, Safari поддерживает атрибут opacity начиная с версии 1.2 (2004 г.). Safari с ядром KHTML сейчас найти практически невозможно. Фактически, Konqueror никогда не поддерживал атрибут -khtml-opacity, поэтому, пожалуйста, не используйте его. (При переводе я учитывал целостность исходного текста, поэтому исправления в приведенный выше код не вносил). Opera поддерживает непрозрачность CSS3 с версии 9.0, а Firefox не поддерживает непрозрачность до версии 3.5. Фильтр -ms- plus в IE8 — это действительно гениальная работа Microsoft! Однако обратите внимание: если вы хотите использовать фильтр и -ms-filter одновременно, обратите внимание, что -ms-filter пишется перед фильтром. ——Шэнфэй