Name: CSS и прозрачность элементов
Item: CSS и прозрачность элементов
Author: CooperX

CSS и прозрачность элементов

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

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

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

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

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

Code

#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

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

Code

#myElement {
opacity: .7;
}

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

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

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

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

Code

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

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

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

Code

#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

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

Code

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

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

Code

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

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

Code

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

Функция RGBA

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

Code

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

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

Функция HSLA

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

Code

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

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

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

Источник: Установка и изменение CSS прозрачности с помощью JavaScript или jQuery,CSS и прозрачность элементов,альфа-канал,rgba,HSLA,opacity

Всего комментариев: 2

Порядок вывода комментариев:

1 CooperX (16.07.2011 14:39)

А я сейчас сижу мучаюсь с учебником, пытаюсь задать прозрачность с помощью filters и проверяю потом в Chrome=)

2 likbezz (21.07.2011 21:15)

Кроссбраузерный вариант (кроме ИЕv6):

Code

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

При наведении:

Code

a:hover img {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

Для ИЕv6:

Code

* html .transparent_class {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
zoom:1;
}

- то же самое и для :hover ....
....
В тему:
Прозрачность элементов при помощи CSS.
..

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]