Кросс-браузерная прозрачность блока

Прозрачность не является одним из часто используемых свойств, но когда она нужна, то хотелось бы иметь легкий способ для ее имплементирования, а не возиться с прозрачными PNG или GIF‘ами. И такой способ есть.

Прозрачность поддерживается большинством браузеров, но описывается по разному, в основном из-за частичной поддержки спецификаций CSS3, которую Internet Explorer естественно не поддерживает.

И так, стили:

#transparent {
opacity: 0.6; // - поддерживается Firefox'ом и Оперой (CSS3 spec)
-moz-opacity: 0.6; // - для поддержки Firefox ниже 1.5 версии и Мозиллы
filter: alpha(opacity=60); - Internet Explorer
}

*Значение opacity для Интернет Эксплорера описывается в целых величинах, т.е 0.6 = 60.

Для сохранения валидности документа советую вынести вторую и третью строку в отдельные CSS-файлы через Conditional Comments. Или использовать следующий метод: А именно Javascript:

var oe = document.getElementById(‘transparent’);
oe.setAttribute(“style”, “opacity:0.6;”)
if (oe.style.setAttribute) //Для IE    oe.style.setAttribute(“filter”, “alpha(opacity=60);”)

*Предостережение: Дочерние элементы блока с заданой прозрачностью наследуют свойство, которое нельзя отменить, задав стиль для дочернего элемента. В следствие этого, если вы используете полупрозрачный блок, как контейнер для текста, позаботьтесь о том чтобы текст был читабельным, и opacity была в пределах 0.7 - 0.8.

(проголосовали: 1, рейтинг: 5 из 5)

Загрузка ...

Рубрика CSS. Автор Curly Brace | 7 Январь 2007

6 Комментариев »

1 —1
советую вынести вторую и третью строку в отдельные CSS-файлы через Conditional Comments

А можно полюбопытствовать, как должны выглядеть условные комментарии для FF и прочих Мозилл (вторая строчка css-кода)?

Комментарий by Прохожий — Август 14, 2007 @ 7:35 pm | Цитировать
2 +1
А можно полюбопытствовать, как должны выглядеть условные комментарии для FF и прочих Мозилл (вторая строчка css-кода)?

Не совсем понял о чем речь. Условные комментарии есть только для IE. Или вы про CSS-хаки?

Комментарий by neutrino — Август 16, 2007 @ 9:10 am | Цитировать
3 +1
Не совсем понял о чем речь.

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

-moz-opacity: 0.6; // - для поддержки Firefox ниже 1.5 версии и Мозиллы

Комментарий by Прохожий — Август 16, 2007 @ 7:06 pm | Цитировать
4 +1
Речь о том, что в статье ошибка. Сделать код валидным, используя условные комментарии, и сохранив при этом его работоспособность, для этой строки не получится

Согласен, сглупил. Хм, надо подумать.

Комментарий by neutrino — Август 22, 2007 @ 1:11 am | Цитировать
5 0
Чтобы сделать валидным код с помощью условных коментов нужно делать а-ля так (нужные условия сам подствь):

<!–[if IE]>@import(ie_only.css)<[endif]–>
<!–[if !IE]–>@import(non_ie.css)<!–[endif]–>

Обрати внимание, что условие в первой строчке формирует валидный комментарий содержащий команду ИЕ, и только ИЕ его обработает как содержимое, остальные сочтут коментом.
Во второй строке, напротив - текст обрамлен валидными коментами, а сам текст должен отрабатываться всеми браузерами, но ИЕ увидев команды пропустит его.
Код - рабочий и рекомендованный самим M$-ом. (ищи на M$DN’е “условные комментарии”).

Комментарий by Costic — Март 21, 2008 @ 11:12 am | Цитировать
6 0
ЭЭЭ, в предыдущем коменте, в примере кода почему-то пропали двойные дефисы разметки коментов, автору блога - незачет. Для тех кто в танке, приведу код еще раз - с учетом пропавших дефисов:

<!—-[if IE]>@import(ie_only.css)<[endif]—->
<!—-[if !IE]—->@import(non_ie.css)<!—-[endif]—->

Комментарий by Costic — Март 21, 2008 @ 11:17 am | Цитировать