CSS3プロパティの不透明度

Question

子要素ではなく親要素の不透明度にのみ影響を与えるにはどうすればよいですか

eg、

signup_backdrop opacityを0.5に設定したいが、子要素signup_boxであるため、不透明度はまったく必要ないが、signup_backdropで設定された不透明度を継承として適用する。

Answer 1

できません。親の上に子をスーパーインポーズ（配置、およびzインデックス）する必要があります。つまり、子は子ではなくなります。または、親の背景に透明なPNGを使用し、完全に不透明な子の兄弟に不透明度を設定します。

*未テストですが、問題ないはずです。

.signup_backdrop {
  position:fixed;
  top:0; left:0;
  background:#333333;
  width:100%; height:100%;
  z-index:10;
}
    
.signup_box {
  position:fixed;
  top:25%; left:25%;
  background:#ffffff;
  width:50%; height:50%;
  z-index:20;
}

<div class="signup_box">
   <p>Hello World</p>
</div>
<div class="signup_backdrop"></div>

Answer 2

CSS 3では、 rbga（）を使用して、色と不透明度を追加します。特定の要素。
これまでのところ、Safari 3およびFirefox 3のみに実装されています。
他のブラウザの場合は、ジョナサンサンプソンの答えからのトリックを使用してください。