设置半透明遮罩背景

半透明遮罩背景常用于弹窗的背景

如下所示：

代码如下所示：

.overlay {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 4000;
    position:fixed;
}

小结（非常重要）：首先是fixed固定定位相对于视窗定位，配合top,left,bottom,right为0可以充满整个视窗背景，设置rgba透明背景色，为了在弹窗过程中背景上面没有其他内容，所以需要把z-index设置的高一点，而弹窗内容比z-index高即可达到上图效果

注意：上面的背景我们充满了整个视窗，我们完全可以通过不同的定位实现不同区域的半透明遮罩背景

 

 

本博客由博主原创，如需转载需说明出处！谢谢支持！