Прозрачный фон

[Отто-Могер]

Здраствуйте!

Моя проблема вот в ч?м: у меня есть общий большой фон и маленький фон уровнем выше, который необходимо сделать прозрачным. Как здесь: http://customize.ru/screens/templates/1003...o_Portfolio.jpg. Прич?м, он(маленький фон) должен просвечивать, независимо от того, какой фон ниже. Т.е. я не могу просто наложить его в Фотошопе вручную и увеличить прозрачность. Общий фон будет указываться пользователем.

Это возможно?

Спасибо!

[PacMan]

Это возможно.

Слой можно сделать прозрачным а можно этому слою в фон поставить полупрозрачную картинку

[YETI]

С полупрозрачной картинкой проблемы могут быть. Осел их не очень любит. Можно еще фильтры посмотреть для ИЕ, но я в них не силен так что больше ниче сказать не могу.

[Fu-tai]

Ищи по форуму это уже обсуждалось!

[Отто-Могер]

Спасибо, поищу

[Maslakoff]

<style>

.opacity_layer {
background-image:url(opacity_image.png);
}

* html .opacity_layer {
background:none;
 // Здесь применяем фильтр прозрачности для IE
 // filter:opacity(....
 // дальше непомню 
}

</style>


<div class="opacity_layer"></div>

[klierik]

да бы не открывать новый топ, по столь раз обсуждаемой теме, пишу в одной из подобных тем

используя AlphaImageLoader filter на внешний див, все внутренние перестают отображаться

виден только главный.

ето можно как-то побороть??!

[a.e.koshelev]

да бы не открывать новый топ, по столь раз обсуждаемой теме, пишу в одной из подобных тем

используя AlphaImageLoader filter на внешний див, все внутренние перестают отображаться

виден только главный.

ето можно как-то побороть??!

поставь для внутренних position:relative

[klierik]

не. ему все равно ((

у меня 3 вложеных один в один дива с бекграундами пнг - левый угол, правй, центральная часть.

для центральной через фильтр включаеться сквиз(растяжка).

первый(верхний) отображаеться как надо, остальные с багами.

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

высота контейнера вытягеваеться ко контенту!

[a.e.koshelev]

в таком случае таблицами делай

[yopopt]

to klierik: А может код покажите?

[klierik]

html

 <!-- button -->
 <div class="button">
 <!-- top side -->
 <div class="top">
 <div class="l"><div class="r"><div class="c"></div></div></div>
 </div>
 <!-- middle side -->
 <div class="mdl">
 <div class="l"><div class="r"><div class="c">
 <!-- content here -->
 </div></div></div>
 </div>
 <!-- button side -->
 <div class="btn">
 <div class="l"><div class="r"><div class="c"></div></div></div>
 </div>
 </div>
 <!-- /button -->

вот собственно сам контейнер.

каждая его часть разбита на 3 части - левая, правая, центр.

так же и по высоте - верх, сентер, низ.

css:

.button, .button * {
 margin: 0px;
 padding: 0px;
 font-size: 0px;
}
/* top */
.button .top .l, .button .top .r, .button .top .c {
 height: 10px;
}
.button .top .l {
 background: url(../dev/img/round-shadow_tl.png) left top no-repeat;
}
.button .top .r {
 margin-left: 10px;
 padding-right: 10px;
 background: url(../dev/img/round-shadow_tr.png) right top no-repeat;
}
.button .top .c {
 background: url(../dev/img/round-shadow_tc.png) left top repeat-x;
}
/* middle */
.button .mdl .l, .button .mdl .r, .button .mdl .c {
 /*height: 10px;*/
}
.button .mdl .l {
 /*background: url(../dev/img/round-shadow_ml.png) left top repeat-y;*/
}
.button .mdl .r {
 margin-left: 10px;
 padding-right: 10px;
 /*background: url(../dev/img/round-shadow_mr.png) right top repeat-y;*/
}
.button .mdl .c {
 /*background: url(../dev/img/round-shadow_tl.png) left top repeat-x;*/
}
/* button */
.button .btn .l, .button .btn .r, .button .btn .c {
 height: 10px;
}
.button .btn .l {
 background: url(../dev/img/round-shadow_bl.png) left top no-repeat;
 _background: none;
 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../dev/img/round-shadow_bl.png');
}
.button .btn .r {
 margin-left: 10px;
 padding-right: 10px;
 background: url(../dev/img/round-shadow_br.png) right top no-repeat;
 position: relative;
 _background: none;
 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../dev/img/round-shadow_br.png');
}
.button .btn .c {
 position: relative;
 background: url(../dev/img/round-shadow_bc.png) left top repeat-x;
 _background: none;
 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../dev/img/round-shadow_bc.png', sizingMethod='scale');
}
/* content */
.button .mdl .c p {
 font: normal 12px tahoma;
 color: #444;
 padding: 12px;
}

тут описываеться ето все чудо.

контент может тянуться по высоте и тянуть контейнер вниз

в данный момент внизу фильтры включены для ie6, собственнно что и надо!

но так как изза вложенности и того что надо растянуть низ ничего неработает (((

думаеться мне что нереально реализовать данный вопрос для ИЕ6, без кучи яваскрипта, что в данном случае непозволительно.

собственно сама задача какая...

для примера можно в фотошопе просто нарисовать квадрат, и пустить outer glow - 5px, к примеру, и получитсья как раз то что я пытаюсь сверстать, при умете что все граничные рисунки должны иметь прозрачность.

гиф тут, к сожелению, неподходит.

[a.e.koshelev]

дело в том что при применении фильтра для ИЕ6 перестают работать свойства background-position и background-repeat. я в таком случае делаю картинку высотой 2000 - 3000 пикселов

[klierik]

у меня изза того что все вложенно друг в друга

внутренние дивы просто == ширине самого рисунка внешнего.

в общем дурной етот ие6 (((

невсегда можно на него найти управу.

может просто есть иные возможности с емулировать подобную задачу

пуска даже с яваскриптом

??!

[Dimitry Wolotko]

Проблемы в?рстки.

[nemecfc]

Не знаю, может, это уже сказали, но вообще используются стили filter: alpha(opacity=60) для IE и opacity для FF и Opera. Так все прекрасно работает:

Тогда все везде прекрасно работает(здесь непрозрачность- 60).

[klierik]

да работает. но нужна не прозрачность и полупрозрачность!

[strix]

как вариант:

попробуйте обойтись без подчеркивания - а вынсесите стили через условные комменты или *html

 _background: none;
 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../dev/img/round-shadow_bl.png');

[klierik]

да я знаю этот хак. он никчему не привел.

было решено просто зделать тень опционально, т.е. для всех она будет работать,

а для ИЕ6 будут подгружаться рисунки без тени. думаю это оптимальный выход в данной ситуации.