индекс слоя и проблема непрозрачности

Question

я установил свойство непрозрачности внешнего div на .5, и я установил значение непрозрачности внутреннего div равным 1 но он все еще должен быть прозрачным

вот пример кода: HTML:

<div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>

CSS:

#div1{
        background: black;
        opacity:.5;
        width:300px;
        height:300px;
        }
        #div2{
            background:white;
            width:150px;
            height:150px;
            opacity: 1;
        }
        #div3{
            display: block;
            width: 50px;
            height: 50px;
            opacity: 1;
            background: black;
        }

так в чем же проблема? или что-то, что я скучаю? помоги мне!

Answer 1

Это распространенное заблуждение относительно CSS, вы не можете установить непрозрачность для родительского элемента, а затем предотвратить его влияние на своих дочерних элементов. Вам нужно установить альфа-цвет для #div1:

#div1{
   background: rgba(0,0,0,0.5);
   width:300px;
   height:300px;
}