Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим.
Решение
В стилях для нужного элемента задаем:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
Теория
W3C в своей рекомендации CSS3 задает свойство opacity для применения эффекта прозрачности элементов. Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).
К сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:
- filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); — для ИЕ версии выше 5.5-7 прозрачность реализуется с помощью фильтра Alpha DirectX. Значение задается в диапазоне от 0 до 100. Сокращенный (не рекомендуемый) вариант — filter: alpha(opacity=50);
- -moz-opacity — для старых версий Mozilla (1.6 и ниже) и Firefox (до 1.6)
- -khtml-opacity — для Safari 1.1 и Konqueror 3.1
Минусы
filter, -moz-opacity, -khtml-opacity валидации не проходят. Opacity — только CSS Level 3.
Возможные проблемы
Не работает в IE. Причина — не указаны width и height. Или можно добавить zoom: 1
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
zoom: 1; /* для элемента в ИЕ, у которого не заданы width и height */
update 23.09.10 by Егор Скорняков может так же не работать, если применить к блоку с очень большими размерами (например, 9999x9999px).
Делаем полупрозрачный фон
При добавлении эффекта прозрачности элементу, все вложенные элементы тоже становятся прозрачными. Из-за этого могут возникнуть некоторые трудности, например, текст становится трудночитаемым. Для решения этой проблемы применяется метод с использование прозрачного фона. В качестве примера будем использовать выпадающее меню. HTML код:
<div
<!--обрабатываем события для показа/скрытия меню -->
onmouseover="this.getElementsByTagName('div')[0].style.display='block'"
onmouseout="this.getElementsByTagName('div')[0].style.display='none'"
class="cssOpacityDiv">
Наведи на меня курсор
<div class="cssOpacityDiv2"><!--выпадающий блок-->
<div></div><!--полупрозрачный красный фон меню-->
<ul class="cssOpacityUl"><!--меню-->
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
</div>
</div>
CSS код:
.cssOpacityDiv2 {
display: none;
position: absolute;
left: 0;
top: 24px;
width: 208px;
overflow: hidden; /* обрезаем лишний фон */
}
.cssOpacityDiv2 div {
background: #990000; /* цвет фона меню */
opacity: 0.5; /* степень прозрачности */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* степень прозрачности для ие */
width: 100%; /* ширина раная ширине родительского блока */
height: 1000px; /* высоту задаем большую, т.к. не знаем заранее сколько пунктов меню будет */
position: absolute;
z-index: 1; /* указываем явно уровень по z-оси, чтобы сделать меню выше */
top: 0;
left: 0;
}
.cssOpacityUl {
list-style: none;
width: 208px;
margin: 0;
padding: 0;
text-align: center;
position: relative; /* для того чтобы указать уровень по z-оси */
z-index: 2; /* задаем уровень больше, чем о полупрозрачного фона */
}