在前端中,我们经常要实现遮罩层,来弱化后面的一切整体,从而突出显示某些特定的元素,比如我们的弹窗,那么 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