css - CSS3 プロパティの不透明度

Question

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

例えば、

signup_backdrop の不透明度を 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 のみに実装されています。
他のブラウザーの場合は、Jonathan Sampson の回答のトリックを使用してください。