Прозрачность в CSS довольно модная техника в последнее время, которая вызывает трудности в кроссбраузерной реализации. До сих пор не существует универсального метода, который бы позволял реализовать прозрачность для всех браузеров. Однако в последнее время ситуация заметно улучшилась.
В этой статье подробно рассмотрены существующие подходы, а также приведены примеры кода и пояснения, которые помогут вам добиться одинакового результата во всех браузерах с минимальными трудозатратами.
Стоит упомянуть следующий момент: несмотря на то что прозрачность используется вот уже в течение нескольких лет, она никогда не была частью стандарта CSS. Это нестандартное свойство, которое должно стать частью спецификации CSS3.
Старый подход
В старых версиях Firefox и Safari необходимо применять свойство следующим образом:
#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }
Свойство -khtml-opacity использовалось в старых версиях webkit-браузеров. Это свойство устарело и больше не нужно, кроме случаев когда вы уверены, что значительная часть трафика вашего сайта исходит от посетителей, использующих Safari 1.x, что, конечно, маловероятно.
В следующей строке используется свойство -moz-opacity , которое работало на очень ранних версиях движка Mozilla. Firefox прекратил его поддержку в версии 0.9.
CSS прозрачность в Firefox, Safari, Chrome и Opera
Для большинства современных браузеров достаточно использовать следующее свойство:
#myElement { opacity: .7; }
В приведённом примере, элементу устанавливается значение непрозрачности 70% (30% прозрачности). То есть если мы установим значение в единицу, то элемент будет непрозрачным, и, соответственно, установка этого значения в ноль, сделает его невидимым.
Свойством opacity обрабатывается 2 десятичных цифры. То есть значение ".01" будет отличаться от значения ".02", хоть это и мало заметно.
CSS прозрачность для Internet Explorer
Как обычно, Internet Explorer не дружит с остальными браузерами. К тому же у нас сейчас в довольно широком использовании три версии этого браузера, установка прозрачности в каждой из которых различна и иногда требует дополнительных усилий для получения положительного результата.
#myElement { filter: alpha(opacity=40); }
В этом примере используется свойство filter , которое работает в версиях 6-8, однако для версий 6 и 7 есть одно ограничение: у элемента свойство hasLayout должно быть установлено в true . Это свойство присутствует только в IE и подробнее о нём можно почитать, например, на Хабре .
Ещё один способ установить прозрачность используя CSS в IE8 - это использовать следующий подход (обратите внимание на комментарии):
#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* работает в IE6, IE7 и IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* только для IE8 */ }
Первая строка будет работать во всех сейчас используемых версиях, вторая же - только в IE8. Обратите внимание, что во второй строке используется префикс -ms- , а значение взято в кавычки.
Установка и изменение CSS прозрачности с помощью JavaScript или jQuery
Вы можете использовать следующий код для установки прозрачности:
Document.getElementById("myElement").style.opacity = ".4"; // для большинства браузеров document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // для IE
Конечно же, в этом случае гораздо проще использовать jQuery, кроме того, работать будет во всех браузерах:
$("#myElement").css({ opacity: .4 }); // работает во всех браузерах
Вы можете анимировать это свойство:
$("#myElement").animate({ opacity: .4 }, 1000, function() { // Анимация завершена; этот код работает во всех браузерах. });
Функция RGBA
В CSS3 планируется поддержка альфа-канала с помощью функции rgba . Эта функция работает в Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Используется она так:
#rgba { background: rgba(98, 135, 167, .4); }
В этом случае последний параметр указывает на уровень непрозрачности.
Функция HSLA
Подобно предыдущей функции, CSS3 также позволяет задать полупрозрачный цвет с помощью функции HSLA , параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha).
#hsla { background: hsla(207, 38%, 47%, .4); }
Важный момент при использовании функций rgba и hsla - это то, что установка прозрачности не применяется к дочерним элементам, тогда как использование свойства opacity - наследуется.
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for "lorem ipsum" will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Итак, сегодня речь пойдет о прозрачности в html страницах. Вы наверняка сталкивались с прозрачными всплывающими блоками, будь то фотогалерея или формы авторизации на каком-либо популярном сайте. Применений прозрачности в html можно найти множество. Так как она делается и где ее можно использовать?
Ну для начала уясним что документ у нас имеет не только одну плоскость монитора - он вообще говоря 3х мерный, об этом я упоминал в статье "Z-index ". Соответственно даже совершенно прозрачный слой, окажись он на верху стека отображения, перекроет доступ к остальным элементам. В этом одно из главных применений прозрачных блоков. Несомтря на то, что обычно используется эффект затенения, полностью прозрачный слой будет работать точно так же. Так, например, работает очень много популярных фото-галерей, организуется затененный слой в котором отбражаются фото, и элементы управления ими. Все остальное пространство страницы оказывается "накрыто" (полу)прозрачным слоем, закрывающим доступ ко всем другим элементам на странице. Т.е. уйти со страницы, нажав на ней какую-либо ссылку не получится - весь текст закрыт подложкой. Чтобы вернуться к телу сайта обычно предусматривают элементы управления для закрытия галереи, формы входа и т.п. Управляют показом/скрытием прозрачных блоков с помощью javascript. Здесь к сожалению альтернативы ему нет. Без его использования пользователь либо вообще не увидит прозрачного блока, либо не сможет его закрыть, не уйдя с текущей страницы. Отмечу, что используются для этого свойства visibility или display.
Так как, собственно организуется прозрачность в html? Настройка прозрачности элементов вообще говоря не входит в спецификацию CSS, потому приходится использовать сразу несколько инструкций для ее создания. Одни браузеры (ie) будут работать с одним вариантом, вторые с другим. Ie использует встроенную функциональность filter, другие браузеры используют свойство "opacity", которое задается в интервале от 0(полностью прозрачный объект) до 1(полная непрозрачность). Для примера в случае с 30% прозрачностью следует писать "opacity:0.30; filter:alpha(opacity=30); ". Свойства как видно из примера схожи - только в первом случае используется число от 0 до 1, во втором процентная запись. Пример такого блока:
<div style = "position:absolute; top: 0; left: 0; background-color:rgb(18, 114, 214); width:100%; id = "VideoFrame" >В примере используется блок показа видео, который активируется при нажатии мышкой на миниатюре видеоролика. Блоку не задана высота, поскольку она может быть разной в зависимости от размера экрана и наполненности страницы. В связи с чем она вычисляется динамически при открытиии видеоролика. Пример использования данной техники можно увидеть на главной странице сайта ruscircus.ru, над которым я в свое время трудился.
Вот, собственно и весь секрет прозрачности в html. Мы используем z-index и opacity для получения эффекта прозрачности. А уж применений этому можно найти множество - здесь все ограничено только вашей фантазией.
08.02.2013 Отвечу на вопросы, заданные в комментарии, а именно о том как сделать на прозрачном блоке непрозрачный. Здесь все просто, не зря я указывал в материале ссылку на материал про z-index, нужно создать еще один блок, с большим z-index чем у прозрачного. Вот сейчас, за несколько минут, набросал пример. Блоки:
<div style = "position:absolute; top: 0; left: 0; background-color:rgb(18, 114, 214); width:100%; height:100%; opacity:0.30; filter:alpha(opacity=30); visibility:hidden; z-index:1;" id = "VideoFrame" > <div id = "VideoFrame2" style = "position:absolute; top: 25%; left: 25%; background-color: white; width:50%; height:50%; opacity:0.99; filter:alpha(opacity=99); visibility:hidden; z-index:2;" onclick = "javascript:HideForm();" > Здесь пишем текст </ div >И функции на javascript
< script type= "text/javascript" > function ShowForm() { document.getElementById ("VideoFrame" ) .style .visibility = "visible" ; document.getElementById ("VideoFrame2" ) .style .visibility = "visible" ; } function HideForm() { document.getElementById ("VideoFrame" ) .style .visibility = "hidden" ; document.getElementById ("VideoFrame2" ) .style .visibility = "hidden" ; }Первая функция отображает прозрачный блок (вместе с текстовым непрозрачным блоком) - ее можно привязать к кнопке. ссылке и т.п.. Вторая функция у меня привязана к щелчку мышкой на блоке с текстом - она скрывает прозрачный блок.
Надеюсь внес ясность в то, как это работает. Ну а если нет - задавайте вопросы.
Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA)
Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространение в разных операционных системах, потому что смотрится стильно и красиво. Главное, иметь под полупрозрачными блоками не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной.
Такой эффект достигается разными способами, включая старомодные методы, как использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity. Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятные оборотные стороны.
Рассмотрим полупрозрачность текста и фона - как правильно ее использовать в дизайне сайта:
Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными. Увеличить уровень прозрачности можно изменяя команду opacity от 0.1 до 1.
HTML 5 CSS 3 IE 9
В веб-дизайне частичная прозрачность также применяется и достигается за счёт формата цвета RGBA, который задаётся только для фона элемента.
Обычно в дизайне полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1, при этом 0 означает полную прозрачность, а 1 непрозрачность цвета - синтаксис применения rgba.
Полупрозрачный фон HTML 5 CSS 3 IE 9
Свойство CSS opacity отвечает за прозрачность элементов (картинки, текста, блоки) в html.
Синтаксис CSS opacity
Где value может принимать вещественные значения в диапазоне от 0.0 до 1.0. Значение 1.0 — означает, что прозрачность отсутствует (по умолчанию).
Пример №1. Прозрачное изображение в html
Первая картинка выведена без прозрачности, вторая с прозрачностью 0.5
Полупрозрачность элемента
Делаем изображение полупрозрачным при наведении!
ДемонстрацияСкачать исходникиСпасибо за внимание!
Следующая статья
Как создать div блок с прокруткой?Свойство CSS 3 opacity позволяет делать прозрачным тот или иной элемент сайта.
Степень прозрачности элемента определяется значением от 0 до 1 где 0 – полностью прозрачный а 1 – непрозрачный вовсе.. Так например значение 0.5 свойства opacity применённого к картинке будет значить что данное изображение должно быть полупрозрачным.
Прозрачность
Прозрачность в IE
Браузер Internet Explorer не поддерживает свойства opacity вплоть до девятой версии, однако имеет свой собственный фильтр с помощью которого можно задать степень прозрачности:
filter: alpha(opacity=50)
Значение opacity для фильтра браузера Internet Explorer может варьироваться от 0 - полностью прозрачный до 100 - непрозрачный
Прозрачность в IE
Блоки этого меню при наведении курсора будут полупрозрачными и в IE!!
Главная
Карта сайта
Купить слона
Продать слона
Взять слона на прокат
Префиксы.
На этом можно было бы в принципе и закончить главу про прозрачность, но я хотел бы Вам ещё поведать про так называемые вендорные префиксы .. особого отношения эти товарищи к данной главе не имеют, однако дальше по ходу обучения CSS3 они будут встречаться всё чаще и чаще и где-то о них нужно рассказать – поэтому расскажу здесь.
Итак, вендорные префиксы это особые приставки к свойствам CSS используемые браузерами для экспериментальных свойств которые официально не входят в спецификацию CSS.
Мы с Вами помним, что спецификация CSS 3 пока что находится в стадии разработки и формально свойств описанных в этом учебнике не существует в природе, однако браузеры на свой страх и риск уже их активно используют.
Почему на свой страх и риск? Да потому что есть вероятность, что когда будет официально утверждена спецификация CSS 3 описанные в ней свойства по своему действию будут отличатся от свойств с таким же именем которые уже используются браузерами. Ну вот взбрендит допустим разработчикам спецификации CSS 3 обозначить свойство opacity не как степень прозрачности блока, а например как его штриховку или мерцание (бред конечно пишу), что тогда будут отображать уже миллионы установленных браузеров для которых opacity это именно прозрачность!?
Или допустим, разработчики браузера придумали своё собственное свойство – нововведение, которого вообще нигде и ни у кого нет, но документ с таким свойством не проходит проверку на валидность потому что такого свойства в спецификации нет.
По этим и другим причинам браузеры используют префиксы вначале свойств, которые не входят в официальную спецификацию. У каждого браузера свой префикс начинающийся со знака «-» данный знак вначале свойства, как впрочем и этот знак «_», согласно спецификации CSS 2.1 обозначает что свойство зарезервировано для CSS расширений тех или иных браузеров.
Вот наиболее популярные браузеры и их префиксы:
Браузер Префикс Opera -o- Firefox, SeaMonkey, Camino -moz- Internet Explorer 8 и выше -ms- Safari до версии 3, Konqueror -khtml- Safari 3 и выше, Google Chrome -webkit- Использовать префиксы очень легко достаточно взять какое либо свойство CSS и подставить к нему нужный префикс, например к свойству opacity подставляем -moz- получается: -moz-opacity
Хотя на самом деле моё выражение «использовать префиксы » неверно! на самом деле ничего никуда не подставляется, просто есть свойство opacity , а есть -moz-opacity и это два разных свойства которые необязательно должны выполнять одну и ту же функцию!! - это следует понимать..
А ещё следует понимать, что те или иные конкретные браузеры до определённых версий могут поддерживать CSS свойства только со своими префиксами (опять неправильно выражаюсь, правильно говорить свои собственные свойства - браузерные CSS расширения), а могут изначально полагаться на пусть даже разрабатываемые спецификации. – Каждый конкретный случай в этом учебнике мы будем рассматривать отдельно.
Что же касается этой главы про прозрачность, то следует отметить, что браузер Firefox 3.5 и его более ранние версии используют своё собственное свойство -moz-opacity , а браузер Safari до версии 1.1 использует своё свойство -khtml-opacity .
Так для того чтобы сделать наш пример полностью кроссбраузерным нам понадобится добавить в код ещё пару строк:
Префиксы и прозрачность
Как видите префиксы значительно растягивают код и их использование не всегда оправданно, если версии браузеров, желающих работать с теми или иными свойствами только с использованием своих префиксов, достаточно старые, как в случае со свойством opacity , то можно их и не указывать.. – хотя конечно это вредный совет..
Ну а теперь полезные советы..
Всегда используйте префиксы (ну если конечно тот или иной браузер не может обойтись без них) в тех случаях, когда используемое свойство может сильно повлиять на работоспособность, читабельность и юзабилити сайта. Одно дело когда не будут работать какие либо мелочи в дизайне сайта и совсем другое когда, например не работает меню сайта или на сайте невозможно прочитать текст из-за того что браузер не поддерживает какое-то свойство а вместо него использует аналогичное своё собственное.
