CSS之mask实现方法汇总
在前端中，我们经常要实现遮罩层，来弱化后面的一切整体，从而突出显示某些特定的元素，比如我们的弹窗，那么 mask (遮罩层)有多少种方法可以实现呢？
<body>
<div class="mask">div>
<div class="dialog">div>
body>方法一：
.mask{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
background:rgba(0,0,0,0.5);
z-index:5999;
}
.dialog{
position: fixed;
top: 50%;
left: 50%;
z-index: 6000;
/*其他样式随意添加*/
}这大概是我们最常用的处理 mask 和 dialog 的方法了，但是还有一个问题，就是 dialog 在水平垂直方向上居中的实现，我们可以通过以下几种方式来实现：
/*
* 方法一：
* 之前最常用方法，弊端是必须要知道弹窗的高度和宽度，才能实现居中
*/
.dialog{
margin-top:-dialog高度/2;
margin-left:-dialog宽度/2;
}
/*
* 方法二：
* 利用CSS3中的transform属性
* IE9+支是没问题的移动端是没问题的
*/
.dialog{
transform:translate(-50%,-50%);
}
/*
* 方法三：
* 利用CSS3中父元素中居中justify-content、align-items属性
*/
<div class="dialog-wrap">
<div class="dialog"></div>
</div>
.dialog-wrap{
display: flex;
justify-content: center;
align-items: center;
}
注:以上方法是最常用且适用的，以下是一些实现方案，只适合一些简单的应用中
方法二：
利用 body 元素的伪元素来实现弱化背景
弊端：可能因为其他的需要， body 的伪元素已经使用，且需要 js 动态给 body 添加 mask 类
body.mask:after{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
background: rgba(0,0,0,0.5);
z-index: 5999;
}
到这里，你也可能想到，为什么不直接用 dialog 的伪元素呢？这是因为如果直接使用 dialog 的伪元素，我们无法对其 Z轴 进行细粒度控制。
方法三：
相对于伪元素，我们又可以想到更灵活的 box-shadow
.dialog{
position: fixed;
top: 50%;
left: 50%;
z-index: 6000;
box-shadow: 0 0 0 500px rgba(0,0,0,0.5);
/*其他样式随意添加*/
}
但是 ，屏幕的宽高不是固定的， box-shadow 的值我们该如何把控呢？这个时候我们的视口单位vmax将闪亮登场。
1vmax 等于 1vh 和 1vw 中的最大值, 100vw 等于整个视口的宽度， 100vh 等于整个视口的高度，因此满足我们需求的最小值是 50vmax
box-shadow: 0 0 0 50vmax rgba(0,0,0,0.5);
但是，这个做法有个弊端，遮罩层的尺寸是相对于视口而言的，如果页面滚动，遮罩层的边缘就会露出来，除非加 position:absolute; ，其次，这种方法只是视觉上的遮罩层，因此无法阻止鼠标与页面其他的部分交互。
方法四：
另外 ::backdrop 可以了解下，详见：
https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop