絕對定位元素的不透明度

Question

我試圖做一個彈出框，導致周圍地區變灰。我的問題是影子div的不透明度似乎超過了彈出窗口的不透明度。我嘗試改變從絕對位置到固定位置，增加彈出窗口的z索引，但都不起作用。

Here是該問題的屏幕畫面。

而且下面是培訓相關的代碼（詢問你是否需要查看更多）

.textPopup 
{ 
    width: 1400px; 
    height: 600px; 
    background-color: White; 
    position: fixed; 
    margin-left: auto; 
    margin-right: auto; 
    z-index: 15; 
    left: 0; 
    right: 0; 
    top: 50px; 
    bottom: 0; 
    opacity: 0.2; 
} 
#innerPopup 
{ 
    background-color: White; 
    width: 1350px; 
    height: 550px; 
    position: absolute; 
    margin-left: auto; 
    margin-right: auto; 
    z-index: 15; 
    left: 0; 
    right: 0; 
    top: 50px; 
    bottom: 0; 
    opacity: 1; 
} 

... snip 
    <div id="popupShadow"> 
    </div> 
    <div class="textPopup"> 
     <div id="innerPopup"> 
     </div> 
    </div> 
</body> 
</html> 

Answer 1

您遇到的問題是#innerPopup在#textPopup之內。然後不透明度由孩子繼承，不能被它自己的屬性覆蓋。

如果它是不可能將它們分開，然後再考慮使用背景的rgba值相對於opacity屬性：

#textPopup { 
    background-color: rgba(255,255,255,0.2); 
} 

你可以看到它在jsfiddle工作。

Answer 2

您將能夠使它工作通過在你的CSS以下變化預期：

#innerPopup 
{ 
    position: relative; /* change this to relative - will allow you to override the parent specified opacity */ 

    opacity: 1; 

    /* other properties */ 
}