模态框具有叠加不透明度

Question

我有一个覆盖和另一个div必须出现在覆盖上，但它需要覆盖的不透明度。

我代码:

样式:

    #mymodal{
    width:400px; 
    padding-bottom:1px;
    background-color:#FFF;
    box-shadow:0 3px 7px rgba(0,0,0,.25);
    box-sizing:border-box;
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    z-index: 620000;
    opacity:1;
    visibility:visible;
    }
   #blackoverlaynd{
   position: fixed; 
   left: 0px; 
   top: 0px; 
   width:100%; 
   height:100%; 
   z-index: 300000; 
   background-color: #000; 
   opacity:0.90; 
   cursor: pointer;
   }

    <div id="mymodal"></div>    
    <div id="blackoverlaynd"></div>

知道为什么会这样吗?

Answer 1

这就是不透明度的行为。

可以考虑以下标记:

<div class="modal">
    <div class="modal-background">
    </div>
    <div class="modal-content">
    </div>
</div>

CSS:

.modal-background {
    opacity: 0.9
}

Answer 2

不采用blackoverlaynd的不透明度，

您的问题是z-index仅适用于relative, absolute和fixed定位元素。将mymodal设置为position:relative，就可以设置好了。