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;
    /*其他样式随意添加*/
}

这大概是我们最常用的处理 maskdialog 的方法了,但是还有一个问题,就是 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 等于 1vh1vw 中的最大值, 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

你可能感兴趣的:(css,页面重构技巧)