0

Кроссбраузерные полупрозрачные колонки

Одна из причин по которой полупрозрачность не имеет большой популярности — поддержка оной в IE6 (в 7-й версии ситуация начала изменяться к лучшему). Чтобы реализовать полупрозрачность в IE надо использовать специальный фильтр. Однако проблема заключается в том, что все дочерние элементы внутри полупрозрачного контейнера также становятся такими, что часто бывает не желательно.

Как же можно реализовать полупрозрачность, которая будет работать во всех браузерах, учитывая все это?

Сделаем это, используя CSS позиционирование. Будем использовать контейнер с двумя дочерними блоками. Один блок будет иметь полупрозрачный фон и занимать все пространство родителя, а другой будет содержать контент и располагаться поверх остальных. Таким образом у нас будет полупрозрачный фон и нормальное содержимое.

Структура выглядит так:

<div id="container">
     <div class="overlay"></div>
     <div class="content">
          ... контент ...
     </div>
</div>

CSS:

#container{
    position:relative;
}
.overlay{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:100%;
    background:#000;
    opacity:0.65;
    -moz-opacity:0.65; /* для старых браузеров на основе Gecko */
    filter:alpha(opacity=65); /* Для IE6&7 */
}
.content {
    position:relative;
}
* html #container .overlay {
    height: expression(document.getElementById("container").offsetHeight);
}

Посмотрите на работающий пример. Следует отметить, что это не будет работать в IE6, если отключены скрипты.

Оригинал: Cross-browser transparent columns

Перевод: Life Style

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *