爲什麼子元素繼承父級不透明度？

簡單的問題（我希望），這是逃避我..我有覆蓋的模式窗口，設置不透明度爲.87，但是我的div（模態內容）似乎繼承了不透明度。爲什麼子元素繼承父級不透明度？

CSS：

body { background-color:black; } 
#overlay { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    text-align:center; 
    z-index: 99; 
    background-color: black; 
    opacity:.87; 
} 

#overlay > div { 
    width:300px; 
    height:300px; 
    margin: 100px auto; 
    background-color: #fff; 
    border:1px solid #000; 
    padding:15px; 
    text-align:center; 
    opacity:1; 
    z-index: 100; 
}

HTML：

<div id="overlay"> 
    <div>some stuff here</div> 
</div>

這裏是一個fiddle（背景應該是純白色的，未混合的）。我究竟做錯了什麼？

來源

2014-02-18 Sterling Archer

我不知道，子元素繼承父的 –

這裏的[的jsfiddle（http://jsfiddle.net/zZ57q/2/） – Vucko

@Vucko是*幾乎*作品。這只是我整個事情的一小部分（足以重現），但模態不是不透明的，但疊加現在不是。 –

不透明度由子元素AFAIK繼承。爲什麼不嘗試使用：

background:rgba(0,0,0,.87);

我刪除了黑色背景。這裏檢查它：http://jsfiddle.net/zZ57q/3/

來源

2014-02-18 08:33:27 witherwind

添加那裏？ –

將不透明度更改爲該值。 – witherwind

哈工作！真棒！ –

爲什麼子元素繼承父級不透明度？

回答

相關問題