|
Прозрачность в 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 - наследуется.
Перейти обратно к новости
|