2009-07-30 11 views
1

どのように私はその子の親要素の不透明度に影響を与えることができず、CSS3プロパティの不透明度

例えば、

私はsignup_backdropの不透明度を0.5に設定することにしたいが、それは私が望んでいない子要素signup_boxですすべての不透明度を持つことはできますが、signup_backdropで設定された不透明度は継承されたものとして適用されます。

答えて

5

できません。あなたは親にスーパービーイング(ポジショニングとZインデックス)をする必要があります。つまり、彼らはもはや子供ではありません。つまり、親の背景に透明なPNGを使用し、完全に不透明な子のすべての兄弟に不透明度を設定します。

*テストされていませんが、良いはずです。 CSS 3では

.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>

+0

これは半分だけです。詳細は私の答えを見てください。 –

+0

私は上記のジョナサンを試してみましたが、それは完璧なおかげで動作します... 今私たちはIEがプロパティlolを組み込むことを決定するまで抗議する必要があります –

+0

どのプロパティを指定しますか? – Sampson

1

あなたは、特定の要素に色や不透明度を追加するrbga()を持っています。
これまでSafari 3とFirefox 3でのみ実装されています。
他のブラウザでは、Jonathan Sampsonの答えを使用します。

+0

これにより、子はその親とは異なる不透明度を持つことができますか? – Sampson

+0

はい。私はそれをテストしました。 –

関連する問題