css 透明度引发的思考

模态框实现

想要实现个模态框的效果，背景有一层蒙版，第一个想法就是设置背景淡灰色并给个透明度，so easy!

background-color: rgba(0,0,0);
opacity: 0.55;

下面图片可以看到，模态框内部的文字也继承了 opacity 的透明度属性，即便给内部子元素设置个 opacity=1 也没有什么卵用。

opacity 实现的透明度会强行传给子元素

除了 opacity 之外，还有一种设置透明度的方法是 background-color: rgba(0,0,0,0.55) ，注意是 rgba 不是 rgb，前者最后那个字母 a 也是设置透明度的，这种方法就不会将透明属性传给子元素了，效果如下。

rbga() 实现的透明度不会继承给子元素

源码如下：

    
    
    
    
    


    
hello world!
    

        

            
模态框内部
        
    

到这里为止效果是弄出来了，又想着去参考 Bootstrap 和 Antd 的代码，看看它们的模态框怎么整的？发现这两货都是整了个空 div(.madal-mask) 来设置背景蒙版，另一个兄弟元素 div(/modal-dialog) 作为模态框的内容。为什么这样写？猜测是为了避免透明度继承的问题，但是一看 modal-mask 代码透明度是用 rgba 属性设置的，压根不存在透明度继承的问题，那么这种写法的意义又何在？？