Кроссбраузерная прозрачность html элементов
Не во всех браузерах прозрачность html элементов задаётся одинаково. Но всё же в большинстве браузеров прозрачность задаётся CSS свойством opacity. В IE <= 6 прозрачность задаётся через фильтры. Хотя правильнее наверное говорить непрозрачность. 100% — непрозрачно, 0% — прозрачно.
1 2 3 4 5 6 7 |
.opacity { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* фильтры для IE 5.5+ */ -moz-opacity: 0.7; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.7; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.7; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ } |
Если применить данный класс к какому нибудь элементу, то непрозрачность будет равна 70%. Для IE задаём в процентах, для остальных от 0 до 1. Будет работать во всех браузерах, кроме самых древних, как то IE < 5.5, Opera < 9... Впрочем и это не смертельно. Отсутствие прозрачности в старых браузерах в большинстве случаев не портит картину. В процессе использования обнаружилось, что прозрачность не применяется в элементу формы select в IE6(видимо и в IE 5.5, только я такого динозавра не видел). Вообще select в IE6 особый - прозрачность не задаётся, ничем не перекрывается. В качестве примера - страничка с прозрачным блоком.
Хорошая статья, полезная информация, Спасибо!!!