層インデックスと不透明度の問題が

Question

iは0.5、 に外側のdivの不透明度プロパティを設定し、私は1 になるように、内側のdivの不透明度の値を設定するが、それはまだここにいるすべての

で透明にしますサンプルコード： 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; 
}