CSS3屬性Opacity

Question

我怎麼能隻影響一個父元素的透明度，而不是它的孩子

例如，

我想signup_backdrop不透明度爲0.5進行設置，但它的子元素signup_box我不想根本沒有任何不透明性，但它會將繼承後的signup_backdrop中設置的不透明度應用於此。

Answer 1

你不能。你需要對父母進行超級強制（定位和z-index），這意味着他們不再是孩子。也就是說，對於父級背景使用透明的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的答案。