Одна из причин по которой полупрозрачность не имеет большой популярности — поддержка оной в IE6 (в 7-й версии ситуация начала изменяться к лучшему). Чтобы реализовать полупрозрачность в IE надо использовать специальный фильтр. Однако проблема заключается в том, что все дочерние элементы внутри полупрозрачного контейнера также становятся такими, что часто бывает не желательно.
Как же можно реализовать полупрозрачность, которая будет работать во всех браузерах, учитывая все это?
Сделаем это, используя CSS позиционирование. Будем использовать контейнер с двумя дочерними блоками. Один блок будет иметь полупрозрачный фон и занимать все пространство родителя, а другой будет содержать контент и располагаться поверх остальных. Таким образом у нас будет полупрозрачный фон и нормальное содержимое.
HTML:
<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
Loading ...
[...] Spanish Russian [...]
Thanks for the translation. I linked to it from the original article
А не проще просто в фон положить полупрозрачную png 1*1px ?
Thanks, Fredric!
Владимир, а что изменится? В IE все равно надо будет фильтр применять.
Интресно, спасибо.
На самом деле можно еще добавить -khtml-opacity: 0.3;opacity: 0.3;
Я именно таким макаром полтора года назад сверстал заголовки у блоков в профиле на LiveInternet. Там как раз градиентные гифы (или пнг, не помню и не суть важно) накладываются на однотонные цвета и выходит довольно приятный и интересный эффект.
На самом деле способ очень полезный, не ограничивается версткой каких-то абстрактных блоков. Если чуть расширить горизонт то можно применять его при рисовании всяких заковыристых кнопок, обложек дисков и много еще чего =]
Alex, как что? как минимум в вёрстке станет на два дива меньше (на те два дива, которые вы подкладываете с прозрачностью).
спасибо ) познавательно
Владимир, с прозрачностью там только один div с классом overlay. Он используется отдельно, чтобы содержимое контейнера content не стало прозрачным. А внешний контейнер можно конечно не использовать.
Alex, так у вас в примере две колонки, поэтому я упомянул два лишних дива, Плюс к этому, лишний скрипт для подгонки высоты полупрозрачного дива.
Хотя, конечно, плюс я вижу в том, что прозрачность можно регулировать прямо в css (не придётся лишний раз заново менять png, когда надо сменить величину прозрачности). Правда, на моей практике менять величину прозрачности мне приходилось всего один раз, поэтому у меня как-то в голове сложилось, что проще кинуть в фон пнг.
Взял на заметку, спасибо… а до популярности не то что ИЕ8, хотя бы ИЕ7 ещё пилить и пилить…
а что, IE7 уже ничего так, на уровне:
http://www.w3schools.com/browsers/browsers_stats.asp
http://www.liveinternet.ru/stat/ru/browsers.html
Спасибо за инфу, надо теперь разобраться!
Пришлось поковыряться чтобы увидеть результат, я бы посоветовала выкладывать сразу рисунок с примерно ожидаемым результатом, чтобы читатели видели что у них получится.
Инесса, там есть ссылка с результатом.
Как раз давно искал похожий пост. Наконец нашел. Спасибо. Буду использовать.
Большое спасибо!!За инф!!Respect!!
За статью спасибо.
Увы этот способ не прокатывает при динамической генерации страниц.
Опера растягивает полупрозрачный DIV по высоте нормально, а вот творение рук (а его вообще руками делали?) Microsoft растягивает высоту всех блоков по самому первому и почему-то прозрачность не применяет.
Получается что половина блока с текстом имеет фон, а другая половина становится прозрачной (если высота блока больше высоты 1-го) или же наоборот фон выезжает за блок (если высота блока меньше высоты 1-го).
Не знаю понято-ли объяснил. Это конечно же лучше просто увидеть своими глазами).
[...] Spanish Russian [...]
Огромное человеческое мерси! Очень долго искал решение, но нашел только у вас! Спасибо что перевели!
Вместо filter:alpha(opacity=65); /* Для IE6&7 */ я бы вам посоветовал использовать задание цвета в формате rgba:
Я полупрозрачный блок
DIV.alfa {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
zoom: 1; /* фильтры работают, если у элемента выставлен hasLayout */
}
Поддержка RGBA в Internet Explorer
Спасибо огромное как раз думала как бы так сделать что бы без пнг….классный метод!
[...] и пр. Самый правдоподобный способ можно посмотреть в блоге Алексея Ильина, но у этого способа есть недостаток — [...]
в IE7 почему-то не пашет…
в Опере и Мозиле все ок, а в IE высота для полупрозрачного блока не срабатывает почему-то
помогите, плиз.
Смотрел в IE7, всё нормально.
не работает
Пример в посте работает.
хм…может у меня кривая версия 7-го експлорера?
[...] Spanish Russian [...]
[...] Spanish Russian [...]