项目中用到简单的弹出层效果便打算自己写一个简陋的效果,要有一个半透明的遮罩层以及一个不透明的弹出内容，最后遇到了一个问题，如图：

底部影响了弹出层内容

弹出层结构

很明显这里由于弹出层的透明问题，使底部内容影响了弹出层内容的显示，

        .mask {
            position: absolute;
            left: 0;
            top: 0;
            background-color: #000;
            opacity: 0.6;
            z-index: 1000;
        }

出现这个问题就是因为这个opacity属性的设置，遮罩层效果确实应该是半透明，但是却不应该设opacity，至少在内容嵌套在遮罩层内部时不应该设置opacity。因为opacity是使设置的元素发生透明度（背景+内容），而我们的目的仅仅是使遮罩层（不想包括遮罩层中的内容）发生透明度，所以在这里我们应该使用background-clolor的rgba给背景色设置透明度，这样就会仅仅遮罩层的背景色有透明，而内容不透明，还有别忘了去掉遮罩层的opacity

设置rgba

　　当然，如果我们的弹出层内容不是遮罩层的子元素，两者如果是同级的兄弟元素，则原来设置opacity也不会出现问题。

    <div class="mask hide" id="mask"></div>
    <div class="dialog hide" id="dialog">

总之，opacity设置元素的透明度是整个元素的透明，包括其内的子元素，而background-color设置rgba仅仅是设置背景色，注意是背景色，不包括背景图，更不会更改其中内容的透明度