Выпекаем сайты, находим покупателей

Кроссбраузерная прозрачность на CSS Opacity

Вводная информация

При создании дизайна вам может понадобится появившееся в CSS 3 - свойство opacity (прозрачность), определяющее уровень прозрачности элемента страницы. Opacity применяется ко всем элементам, не наследуется, а в качестве значения уровня прозрачности выступает число от 0.0 до 1.0 (можно использовать целое число или дробное без нуля, напр.: .5), чем больше, тем менее прозрачный.

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

Поддержка opacity разными браузерами:
Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.0+2.0+3.5+2.0+1.0+

Пример использования opacity:



Кроссбраузерный Opacity с помощью CSS

Для Firefox ниже версии 3.5 - есть свойство -moz-opacity. Используется также как и opacity, пример:


Для Internet Explorer ниже версии 9.0 - есть свойство filter. Используется со значениями от 0 до 100, пример:


Для Konqueror 3.1 и Safari 1.1 - есть свойство -khtml-opacity. Используется также как и opacity, пример:


Комплексное решение для старых браузеров:



Кроссбраузерный Opacity с помощью Jquery

Фреймворк Jquery на JavaScript имеет метод fadeTo, позволяющий настраивать прозрачность. Данный метод будет действовать при включенном у клиента javascript и подключённом фреймворке Jquery версии 1.x, т.к. версии 2.x не поддерживают версии IE 6,7 и 8. Пример:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">// <![CDATA[
  $('#wrapper').click(function(){ $(this).fadeTo('slow', '0.5'); })
// ]]></script>
</head>
<body>
<div id="wrapper"></div> <!-- Элемент с селектором wrapper - будет иметь полупрозрачный вид -->
</body>
</html>

Ссылки по материалу

Комментарии и отзывы к материалу

Открыта вакансия на первого комментатора!

Отправить комментарий

Как зовут?

Сообщение