Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 56
Правый верхний блок глючит в 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>
Рамка красная для наглядности ;)
в демке
anchor "container2" already defined
в опере 9.51 чтобы увидеть текст блока 2 нада его выделить Оо. когда снимаеш выделение - видно нормально...
Проще надо быть:
#container { opacity:0.5; filter:alpha(opacity=50); -moz-opacity:0.5; }
#container * { opacity:1; filter:alpha(opacity=100); -moz-opacity:1; }
При условии, что внутри у вас всё будет в тэгах(скажем нет голому тексту).
#container { opacity:0.5; filter:alpha(opacity=50); -moz-opacity:0.5; }
#container * { opacity:1; filter:alpha(opacity=100); -moz-opacity:1; }
При условии, что внутри у вас всё будет в тэгах(скажем нет голому тексту).
чушь) - прозрачность распространяется на все потомки
http://www.w3.org/TR/css3-color/#transpa…
для ИЕ может работать - но там фильтр, а не прозрачность
http://www.w3.org/TR/css3-color/#transpa…
для ИЕ может работать - но там фильтр, а не прозрачность
А Вы это пробовали прежде чем предлагать? Это работать не будет как вы ожидаете. Для первого правила так же нужно добавить что либо (zoom: 1, position: absolute, width/height) чтобы прозрачность начала работать для блока в IE.
Стандартная практика, но лично мне ближе растягивание (или повторение по вертикали и горизонтали для нормальных браузеров) полупрозрачной однопиксельной картинки. Я не люблю лишние несемантичные элементы в коде и скрипты там, где можно обойтись маленькой картинкой и одной строчкой в expression для IE. Но за автоматизацию метода большое спасибо, очень полезно.
-moz-opacity — излишне; так как фф2 уже понимает opacity, то для чего это?
важно указать, что свойство
height:1500px;
определяет максимальную высоту полупрозрачного фона, таким образом какая-нибудь объемная статья, выложенная на такой подложке, вполне незаметно может "перетечь" на основной фон сайта
height:1500px;
определяет максимальную высоту полупрозрачного фона, таким образом какая-нибудь объемная статья, выложенная на такой подложке, вполне незаметно может "перетечь" на основной фон сайта
согласен что -moz-opacity будет лишним.
решал эту проблему так же, только без jQuery :)
решал эту проблему так же, только без jQuery :)
Побаловался в FF2 с <H1> внутри непофикшенной прозрачности.
Получается, что потомки наследуют уровень прозрачности и если им выставить opacity: 0.5 при том, что у парента уже стоит 0.5, реальная opacity у них будет 0.25. Хотя computed style показывает все равно ту, которая установлена для <H1>, т.е. 0.5.
Получается, что потомки наследуют уровень прозрачности и если им выставить opacity: 0.5 при том, что у парента уже стоит 0.5, реальная opacity у них будет 0.25. Хотя computed style показывает все равно ту, которая установлена для <H1>, т.е. 0.5.
Фон в примере разрывает мозг при попытке читать текст. Но это к делу не относится
в общем, png — это наше все, а кто не умеет — я не виноват
Бред полный. Проще использовать png.
Очередной гениальный веб-девелопер, и поклонник jQuery.
Давайте рассмотрим такую ситуацию:
Высота блоков не фиксированная, а JS отключен(даже если это опустить, неприятно смотреть на любые прыжки после загрузки страницы).
В данном случае нет «правильного» решения, в этом главная ошибка статьи. На мой взгляд, правильное решение — дублировать блок с текстом, и использовать копию как блок с прозрачностью, таким образом он сразу будет иметь нужную высоту, но это ппц с точки зрения семантики, а так же возрастает вес страницы. К тому же, при отключении JS фильтры ИЕ не работают. А использовать jQuery для столь элементарной задачи, и писать об этом статью — это моветон.
Давайте рассмотрим такую ситуацию:
Высота блоков не фиксированная, а JS отключен(даже если это опустить, неприятно смотреть на любые прыжки после загрузки страницы).
В данном случае нет «правильного» решения, в этом главная ошибка статьи. На мой взгляд, правильное решение — дублировать блок с текстом, и использовать копию как блок с прозрачностью, таким образом он сразу будет иметь нужную высоту, но это ппц с точки зрения семантики, а так же возрастает вес страницы. К тому же, при отключении JS фильтры ИЕ не работают. А использовать jQuery для столь элементарной задачи, и писать об этом статью — это моветон.
Все это хороше пока вам нужна лишь серая (или скажем там одноцветная) прозрачность... вот у меня например юзеры выбирают фон странички+прозрачность - не нагенерируешь же тут на все цвета радуги пнг-ишки :(
приходится мириться с прозрачностью всех элементов...
приходится мириться с прозрачностью всех элементов...
Небольшое замечание по части jquery
зы перед тегами слеши убрать надо =)
$("div.transp").wrapInner('<\div class="content">').prepend('<\div class="transparency">');
зы перед тегами слеши убрать надо =)
http://www.css3.info/preview/rgba/
таким методом это будет делаться в 1 диве в будущем
таким методом это будет делаться в 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: точно не помню код, и нет возможности в данный момент проверить, но когда создавал тень для безразмерного блока, без использования графики, использовал подобную структуру.
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: точно не помню код, и нет возможности в данный момент проверить, но когда создавал тень для безразмерного блока, без использования графики, использовал подобную структуру.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Правильная прозрачность