javascript - 模态框有覆盖不透明度

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
}