半透明遮罩背景常用于弹窗的背景
如下所示:
代码如下所示:
.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高即可达到上图效果
注意:上面的背景我们充满了整个视窗,我们完全可以通过不同的定位实现不同区域的半透明遮罩背景
本博客由博主原创,如需转载需说明出处!谢谢支持!