要实现覆盖整个页面的遮罩效果，可以使用 CSS 的伪元素 ::before 或 ::after。具体实现方法如下：
<body> 元素。例如：body {
position: relative;
}::before 或 ::after 伪元素来添加遮罩效果，并设置其样式。例如：body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
z-index: 999; /* 遮罩层级 */
}在上面的示例中，使用了 position: absolute 将伪元素定位到 <body> 元素的左上角，使用 width: 100%; height: 100%; 使其占据整个页面的宽度和高度，使用 background-color 设置遮罩层的背景颜色，使用 z-index 设置遮罩层的层级，确保它在其他元素之上。
body::before {
/* ... */
pointer-events: none;
}这样，遮罩层就会覆盖整个页面，并且不会影响其他元素的交互。
关键词：CSS、伪元素、::before、::after、遮罩效果、position、absolute、width、height、background-color、z-index、pointer-events