下面是详细的攻略：
1. 基础实现方法
首先，我们可以用一个 <div> 元素来模拟遮罩层，并在其中添加一个半透明的背景。代码如下：
<div class="mask"></div>
<style>
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5); /* 使用 rgba 设置半透明背景，最后的参数即为透明度，数值越小越透明 */
}
</style>
在这个代码中，我们通过设置 .mask 元素的 position 为 fixed，使其脱离文档流并且相对于浏览器窗口进行定位。然后，我们设置其 top、left、width、height 分别为 0、100%、100%，以达到遮盖整个可视区域的效果。最后，我们使用 rgba() 函数设置背景颜色为黑色半透明，透明度为 0.5。
2. 带有内容的遮罩层
有时候我们需要在遮罩层上添加内容，以便用户可以进行某些操作。比如一个模态框。那么，我们就需要在遮罩层上添加相应的内容，并将其 z-index 属性设置为比遮罩层更高的值，使其显示在遮罩层上方。代码如下：
<div class="mask">
<div class="modal">
<h2>我是模态框</h2>
<p>这里是模态框内容</p>
</div>
</div>
<style>
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2; /* 比遮罩层更高的 z-index */
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
</style>
在这个代码中，我们在遮罩层内部添加了一个模态框。模态框的样式通过 CSS 设置，我们使用了 position: absolute 把它相对于父级位置进行定位，并使用 transform 属性使其居中显示。由于我们希望模态框显示在遮罩层上方，因此设置其 z-index 为 2，而遮罩层的 z-index 则默认为 1。
为了让模态框看起来更美观，我们还添加了一些样式，比如白色的背景、圆角边框和阴影等。当然，这只是一个示例，你可以根据需要进行自定义。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！