Opacity не слушается!

[mopnex161rus]

Всем привет!Всех с Праздником!

У меня такой вопрос - у меня есть блок(квадрат) в нем чуть меньше ещё один и в этом ещё меньше тоже блок.Так вот я задал прозрачность первому из блоков и у меня стали все блоки прозрачными...мне надо что бы 3ий блок был не прозрачен(который поверх всех) но что бы я не делал он не слушается(((

Помоги люди добрые!!!

[sigma77]

mopnex161rus,

Если нужно задать прозрачность только фона, используй rgba + фильтр градиента для старых ИЕ.

[Great Rash]

Всё, что находится внутри блока с прозрачностью становится прозрачным. Это нормальное поведение. Задавайте прозрачность другим способом (прозрачный PNG, альфа-канал).

[mopnex161rus]

Извините а можно поточнее а то я новичок в этом деле(((

Вот у меня такая картина:

Красный блок хочу сделать не прозрачным(он белый в итоге будет)

Это реально?

Судя по всему нет((

Edited April 16, 2012 by mopnex161rus

[Switch74]

это реально

вот твои блоки

<div class="block1">
  <div class="block2">
    <div class="block3">

    </div>
  </div>
</div>

как я понимаю, ты хочешь сделать block1 с полупрозрачным фоном, на котором будет красный не прозрачный прямоугольник

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

.block1
{
background:rgba(100,100,100,0.5);
}

или

.block1
{
background:url(bg.png);
}

в этом случае bg.png должна быть с альфа каналом и сделана полупрозрачной

как ты делаешь прозрачным block1?

[mopnex161rus]

Я просто указывал opacity: 0.7;

ппц ну уже все перепробовал((((

Edited April 16, 2012 by mopnex161rus

[mopnex161rus]

body {
    background-image: url('../img/bg5.gif');
    background-repeat: no-repeat;
    background-position: center 0px;
    background-color: black;
    background-attachment: fixed;
}



.MainBody {
    opacity: 0.7;
    border-radius:0 0 7px 7px;
    border-left: 1px solid #D3B66A;
    border-right: 1px solid #D3B66A;
    background-color: #000000;
    width: 1208px;
    margin: 0 auto; 
}

.MainBorder {
    background-color: white;
    width: 1182px;
    height: 1500px;
    border-left: 3px solid #D3B66A;
    border-right: 3px solid #D3B66A;

}

.MainCont {
    border-radius:0 0 7px 7px;
    background-color: red;
    width: 1100px;
    height: 100px;
    font-family: verdana;
    font-size: 26px;
    color: black;
}

покажите что тут поменять

Edited April 16, 2012 by mopnex161rus

[K313]

.MainBody {
    opacity: 0.7;
    border-radius:0 0 7px 7px;
    border-left: 1px solid #D3B66A;
    border-right: 1px solid #D3B66A;
    background-color: #000000;
    width: 1208px;
    margin: 0 auto; 

как уже сказали, убрать opacity, а вместо background-color: #000000; написать background:url("/bg.png") repeat;background:rgba(100,100,100,0.5);

"/bg.png" - полупрозрачная картинка для тех кто не понимает rgba(100,100,100,0.5)

[Switch74]

если хочется через opacity могу предложить такую схему

<style>
.wrapper{position:relative;}
.opacity{position:absolute;top:0px;left:0px;right:0px;bottom:0px;background:#000000;opacity:0.7;}
</style>
<div class="wrapper">
  <div class="opacity"></div>
  <div class="content">
    content
  </div>
</div>

Edited April 16, 2012 by Switch74

[mopnex161rus]

Спасибо оба варианта подошли и оба помогли!!!