Прозрачность не является одним из часто используемых свойств, но когда она нужна, то хотелось бы иметь легкий способ для ее имплементирования, а не возиться с прозрачными 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.
[quote post="45"]советую вынести вторую и третью строку в отдельные CSS-файлы через Conditional Comments[/quote]
А можно полюбопытствовать, как должны выглядеть условные комментарии для FF и прочих Мозилл (вторая строчка css-кода)?
[quote post="45"]А можно полюбопытствовать, как должны выглядеть условные комментарии для FF и прочих Мозилл (вторая строчка css-кода)?[/quote]
Не совсем понял о чем речь. Условные комментарии есть только для IE. Или вы про CSS-хаки?
[quote comment="852"]Не совсем понял о чем речь. [/quote]
Речь о том, что в статье ошибка. Сделать код валидным, используя условные комментарии, и сохранив при этом его работоспособность, для этой строки не получится
[quote post="45"]-moz-opacity: 0.6; // – для поддержки Firefox ниже 1.5 версии и Мозиллы
[/quote]
[quote post="45"]Речь о том, что в статье ошибка. Сделать код валидным, используя условные комментарии, и сохранив при этом его работоспособность, для этой строки не получится[/quote]
Согласен, сглупил. Хм, надо подумать.
Чтобы сделать валидным код с помощью условных коментов нужно делать а-ля так (нужные условия сам подствь):
<!–[if IE]>@import(ie_only.css)<[endif]–>
<!–[if !IE]–>@import(non_ie.css)<!–[endif]–>
Обрати внимание, что условие в первой строчке формирует валидный комментарий содержащий команду ИЕ, и только ИЕ его обработает как содержимое, остальные сочтут коментом.
Во второй строке, напротив – текст обрамлен валидными коментами, а сам текст должен отрабатываться всеми браузерами, но ИЕ увидев команды пропустит его.
Код – рабочий и рекомендованный самим M$-ом. (ищи на M$DN’е “условные комментарии”).
ЭЭЭ, в предыдущем коменте, в примере кода почему-то пропали двойные дефисы разметки коментов, автору блога – незачет. Для тех кто в танке, приведу код еще раз – с учетом пропавших дефисов:
<!—-[if IE]>@import(ie_only.css)<[endif]—->
<!—-[if !IE]—->@import(non_ie.css)<!—-[endif]—->
Вот еще один очень удобный способ с использованим jquery
$(function(){
$(‘img’).css(‘opacity’, ‘0.3′)
});
Нужно разяснение что такое Conditional Comments и как вынести в отдельные css? В настоящий момент у меня реализовано так, код валиден, но валидность CSS с ошибками.
Не могу побороть проблему, прозрачность другим способом решить не могу. (счётчики и поиск)