Jump to content
  • 0

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


Отто-Могер
 Share

Question

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

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

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

Спасибо!

Link to comment
Share on other sites

18 answers to this question

Recommended Posts

  • 0

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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, к примеру, и получитсья как раз то что я пытаюсь сверстать, при умете что все граничные рисунки должны иметь прозрачность.

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

??!

Link to comment
Share on other sites

  • 0

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

"..."

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy