Кроссбраузерное полупрозрачное затемнение фона
Дата публикации: 11.02.2009
Последнее обновление: 22.09.2009
Задача
Сделать полупрозрачный кроссбраузерный фон. Проблем такое сделать нет, если бы не IE6, который не понимает position: fixed. Для решения этой проблемы используем CSS код:
#TB_overlay {
position: fixed;
z-index: 100;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=55);
-moz-opacity: 0.55;
-khtml-opacity: 0.55;
opacity: 0.55;
}
* html #TB_overlay {
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + "px");
}
P.S. в примере в качестве фона используется <div>. Для нормальной работы с IE6, нужно использовать iframe, чтобы получилось перекрыть select. Используя библиотеку jQuery можно воспользоваться следующим условием:
if(!jQuery("body").find("#TB_overlay").is("div")) /* если фон уже добавлен не добавляем повторно */
{
if(!jQuery.browser.msie) /* если браузер не ИЕ фоном будет div */
jQuery("body").append("<div id='TB_overlay'></div>");
else /* иначе добавляем iframe */
jQuery("body").append("<div id='TB_overlay'><iframe scrolling='no' frameborder='0' style='position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter:alpha(opacity=0)'></iframe></div>");
}
Проверено в:
По теме
Теги: CSS приемы