|
Источник:
http://www.tigir.com/
Эффект прозрачности - это тема данной статьи. Если вам
интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS
или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных
браузерах) с учетом браузеров Firefox, Internet Exploder, Opera, Safari,
Konqueror, тогда милости просим. Вдобавок рассмотрим готовое решение
постепенного изменения прозрачности с помощью javasc
CSS opacity (CSS прозрачность)
W3C в своей рекомендации CSS3 определяет
свойство opacity для
применения эффекта прозрачности к элементам страницы. Значением данного свойства
является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент
становится полностью прозрачным, а при значении равном единице, соответственно,
совсем не прозрачным. Свойство можно применять к любым элементам страницы.
Пример (задана прозрачность 0.2, 0.5 и 1.0):
.img1 { opacity: 0.2; }
.img2 { opacity: 0.5; }
.img3 { opacity: 1.0; }
Нравится? Да? Так что самое время подпортить настроение. Понятное дело, что
разные браузеры по-разному реализуют данное свойство: кто вообще не реализует,
кто реализует, используя свое собственное название для данного свойства, а кто
фильтры использует.
Браузеры поддерживающие CSS3 opacity
Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+,
Firefox 0.9+, Safari 1.2+, Opera 9, Internet Explorer 7.
Для установки прозрачности через скрипт используем: object.style.opacity
Mozilla 1.6 и ниже, Firefox 0.8
Старые Mozilla и Firefox 0.8 используют своё название данного свойства:
-moz-opacity
Для установки прозрачности через скрипт используем:
object.style.MozOpacity
Safari 1.1, Konqueror 3.1
Данные товарищи, построенные на движке KHTML, используют для управления
прозрачностью свойство: -khtml-opacity
Для установки прозрачности через скрипт используем:
object.style.KhtmlOpacity
Однако, имейте ввиду, что данное свойство доступно лишь в данных версиях этих
браузеров. Safari с версии 1.2 использует CSS3 opacity, но при этом Konqueror
старше версии 3.1, перестав поддерживать -khtml-opacity, не ввел
поддержку CSS3 opacity.
В январе 2003 года корпорация Apple представила новый браузер для Mac OS X,
основанный на движке KHTML, Safari. Благодаря лицензии, на условиях которой
распространяется KHTML, все изменения, вносимые в него разработчиками Apple,
публикуются в виде патчей, которые, после пересмотра, добавляются в основную
ветку KHTML.
Причиной по которой Konqueror утратил возможность реализации эффекта
прозрачности как раз и заключается во внесение в ядро KHTML патчей от Safari,
т.к. Safari использует возможности присутствующие в Mac OS X, но которых нет в
KDE.
Конечно рано или поздно эта ситуация будет исправлена, но на данный момент в
последней версии 3.5 ситуация остается прежней.
Internet Explorer 5.5+
IE реализует прозрачность через
Alpha DirectX фильтр. Стоит отметить, что данный фильтр использует
значение прозрачности в диапазоне от 0 до 100 (а не от 0.0 до 1.0). Так же
отмечу, что фильтр можно применять лишь к элементу с установленным свойством
height, или width, или position со значением absolute, или writingMode со
значением tb-rl, или с contentEditable установленным в true.
Пример (устанавливаем прозрачность на половину):
.img1 { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); }
.img2 { filter: alpha(opacity=50); }
Для установки прозрачности через скрипт используем: object.style.filter =
"progid:DXImageTransform.Microsoft.Alpha(строка параметров)". Для получения
прозрачности аналогичной прозрачности W3C используем в качестве строки
параметров значение "opacity=число от 0 до 100".
|
