CSS中添加遮罩层可以让网页效果更加丰富和炫酷，同时也能提高用户体验。下面我们来详细介绍如何添加遮罩层。

首先，我们需要创建一个遮罩层的样式。可以使用如下代码：

.mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);}

上面的代码中，我们使用了一个类名为“mask”的样式，设置其属性为fixed表示该元素跟随整个网页滚动；同时设置其一些位置和颜色属性，可以替换其中的背景颜色代码。

接下来，我们需要在需要遮罩的元素上添加该遮罩层。可以使用如下代码：

<div ></div><div >...</div>

上面的代码中，我们给需要遮罩的元素（以这里示例中的div为例）外层包裹了一个类名为“mask”的元素，以覆盖整个元素，并达到遮罩效果。同时，我们在该遮罩元素下方嵌套了一个需要遮罩的元素，这里使用的类名为“content”，你可以替换成自己需要的元素类名。

通过上述步骤，我们就成功添加了一个简单的遮罩层！接下来，你可以通过样式属性的变化以及一些js效果，来制作更加丰富的遮罩效果。