Правильная прозрачность

Правый верхний блок глючит в Opera 9.51. Сразу после загрузки текст чёрный, но если прокрутить и вернуть, он становится белым.

filter:alpha(opacity=50); — это для ie?

хм..Opera 9.26 всё нормально

Интересно, что выделение текста в полупрозрачном блоке №1 тоже полупрозрачное :)

Все нормально, только в Опере 1500 пикселей приводят к вертикальной прокрутке.

Походу эта техника из шаолиня

Прошу прощения, но вы кажется что-то перемудрили. Вот так тоже работает неплохо :)


.trans
{
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
background-color:#000000;
width:100%;
height:100%;
position:absolute;
margin:-20px;
}

.container
{
position:relative;
width:200px;
padding:20px;
border:1px solid red;
}

....
....
<div class="container">
<div class="trans">
</div>
vot<br /> kak<br /> to<br /> tak<br />


</div>


Рамка красная для наглядности ;)

в демке

в опере 9.51 чтобы увидеть текст блока 2 нада его выделить Оо. когда снимаеш выделение - видно нормально...

Стандартная практика, но лично мне ближе растягивание (или повторение по вертикали и горизонтали для нормальных браузеров) полупрозрачной однопиксельной картинки. Я не люблю лишние несемантичные элементы в коде и скрипты там, где можно обойтись маленькой картинкой и одной строчкой в expression для IE. Но за автоматизацию метода большое спасибо, очень полезно.

-moz-opacity — излишне; так как фф2 уже понимает opacity, то для чего это?

важно указать, что свойство
height:1500px;
определяет максимальную высоту полупрозрачного фона, таким образом какая-нибудь объемная статья, выложенная на такой подложке, вполне незаметно может "перетечь" на основной фон сайта

согласен что -moz-opacity будет лишним.
решал эту проблему так же, только без jQuery :)

Побаловался в FF2 с <H1> внутри непофикшенной прозрачности.
Получается, что потомки наследуют уровень прозрачности и если им выставить opacity: 0.5 при том, что у парента уже стоит 0.5, реальная opacity у них будет 0.25. Хотя computed style показывает все равно ту, которая установлена для <H1>, т.е. 0.5.

Фон в примере разрывает мозг при попытке читать текст. Но это к делу не относится

Бред полный. Проще использовать png.

Очередной гениальный веб-девелопер, и поклонник jQuery.

Давайте рассмотрим такую ситуацию:
Высота блоков не фиксированная, а JS отключен(даже если это опустить, неприятно смотреть на любые прыжки после загрузки страницы).

В данном случае нет «правильного» решения, в этом главная ошибка статьи. На мой взгляд, правильное решение — дублировать блок с текстом, и использовать копию как блок с прозрачностью, таким образом он сразу будет иметь нужную высоту, но это ппц с точки зрения семантики, а так же возрастает вес страницы. К тому же, при отключении JS фильтры ИЕ не работают. А использовать jQuery для столь элементарной задачи, и писать об этом статью — это моветон.

Небольшое замечание по части jquery

$("div.transp").wrapInner('<\div class="content">').prepend('<\div class="transparency">');

зы перед тегами слеши убрать надо =)

http://www.css3.info/preview/rgba/

таким методом это будет делаться в 1 диве в будущем

#container {
position: relative;
}

#container.transparency {
opacity:0.5;
filter: alpha(opacity=50);
-moz-opacity:0.5;

background-color:#000000;

position: absolute;
left:0px; top:0px; right:0; bottom:0;
z-index:1;

/* for ie6 */
_width: 100%;
_height: expression(this.parentNode.offsetHeight + 'px');
}

.content {
position: relative;
z-index: 2;
}

ps: точно не помню код, и нет возможности в данный момент проверить, но когда создавал тень для безразмерного блока, без использования графики, использовал подобную структуру.