✔CSS и прозрачность элементов. - «Верстка»

Прозрачность в CSS довольно модная техника в последнее время, которая вызывает трудности в кроссбраузерной реализации.
До сих пор не существует универсального метода, который бы позволял реализовать прозрачность для всех браузеров. Однако в
последнее время ситуация заметно улучшилась.

В этой статье подробно рассмотрены существующие подходы, а также приведены примеры кода и пояснения, которые помогут вам
добиться одинакового результата во всех браузерах с минимальными трудозатратами.

Стоит упомянуть следующий момент: несмотря на то что прозрачность используется вот уже в течение нескольких лет, она никогда не
была частью стандарта CSS. Это нестандартное свойство, которое должно стать частью спецификации CSS3.

Старый подход

В старых версиях Firefox и Safari необходимо применять свойство следующим образом:

#myElement {
-khtml-opacity:	.5;
-moz-opacity:	0.5;

Свойство -khtml-opacity использовалось в старых версиях webkit-браузеров. Это свойство устарело и больше не нужно,
кроме случаев когда вы уверены, что значительная часть трафика вашего сайта исходит от посетителей, использующих Safari 1.x,
что, конечно, маловероятно.

В следующей строке используется свойство -moz-opacity, которое работало на очень ранних версиях движка Mozilla.
Firefox прекратил его поддержку в версии 0.9.

CSS прозрачность в Firefox, Safari, Chrome и Opera

Для большинства современных браузеров достаточно использовать следующее свойство:

#myElement {
opacity: .7;

В приведённом примере, элементу уствнавливается значение непрозрачности 70% (30% прозрачности). То есть если мы установим
значение в единицу, то элемент будет непрозрачным, и, соотвественно, установка этого значения в ноль, сделает его невидимым.

Свойством opacity обрабатывается 2 десятичных цифры. То есть значение ".01" будет отличаться от значения ".02",
хоть это и мало заметно.

CSS прозрачность для Internet Explorer

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

#myElement {
filter: alpha(opacity=40);

В этом примере используется свойство filter, которое работает в версиях 6-8, однако для версий 6 и 7 есть одно
ограничение: у элемента свойство hasLayout должно быть установлено в true. Это свойство присутствует
только в IE и подробнее о нём можно почитать, например, на Хабре.

Ещё один способ установить прозрачность используя CSS в IE8 - это использовать следующий подход (обратите внимание на комментарии):

#myElement {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);		/* работает в IE6, IE7 и IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";	/* только для IE8 */

Первая строка будет работать во всех сейчас используемых версиях, вторая же - только в IE8. Обратите внимание, что во
второй строке используется префикс -ms-, а значение взято в кавычки.

Установка и изменение CSS прозрачности с помощью javascript или jQuery

Вы можете использовать следующий код для установки прозрачности:

document.getElementById("myElement").style.opacity = ".4"; // для большинства браузеров
document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // для IE

Конечно же, в этом случае гораздо проще использовать jQuery, кроме того, работать будет во всех браузерах:

$("#myElement").css({ opacity: .4 ); // работает во всех браузерах

Вы можете анимировать это свойство:

$("#myElement").animate({
opacity: .4
, 1000, function() {
// Анимация завершена; этот код работает во всех браузерах.
);

Функция RGBA

В CSS3 планируется поддержка альфа-канала с помощью функции rgba. Эта функция работает в Firefox 3+, Opera 10.1+,
Chrome 2+, Safari 3.1+. Используется она так:

#rgba {
background: rgba(98, 135, 167, .4);

В этом случае последний параметр указывает на уровень непрозрачности.

Функция HSLA

Подобно предыдущей функции, CSS3 также позволяет задать полупрозрачный цвет с помощью функции HSLA, параметры которой
означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha).

#hsla {
background: hsla(207, 38%, 47%, .4);

Подробнее об этой функции можно почитать на сайте W3.org.

Важный момент при использовании функций rgba и hsla - это то, что установка прозрачности не применяется к
дочерним элементам, тогда как использование свойства opacity - наследуется.