小程序制作带有遮罩层的弹窗导致弹窗也被透明化

 .update_menu_mask{

    height: 100vh;

    width: 100vw;

   background-color:#000000;

   opacity: 0.5;

    z-index: 200;

    position: fixed;

    top: 0;

    left: 0;

}

样式代码如上 发现导致了弹窗也被透明化了,然后给容器加上内联样式opacity:1;还是不行;

最后通过修改了 

.update_menu_mask{

    height: 100vh;

    width: 100vw;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 200;

    position: fixed;

    top: 0;

    left: 0;

}

最后实现了效果 通过rgba(red,green,blue,Alpha)；

那这是为什么会这样呢???

因为：

当 opacity 属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的 opacity 属性值

至于rgba本人也不太懂，还请大家评论区赐教