遮罩效果是在網頁設計中經常用到的一種效果，它可以將某一區域進行遮蓋，以達到一種特殊的視覺效果。在本文中，我們將介紹如何使用CSS和JavaScript來實現遮罩效果。

.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.mask-off {
display: none;
}

CSS代碼中，我們首先定義了一個名為“mask”的class，它的position屬性設為fixed，使其可以覆蓋整個頁面。其background-color屬性用來設置遮罩的顏色，這里用了半透明黑色（rgba(0, 0, 0, 0.5)）。z-index屬性設置遮罩層級，使其位于其他元素之上。

接下來是我們定義的JavaScript代碼：

function showMask() {
document.getElementById("mask").classList.remove("mask-off");
}
function hideMask() {
document.getElementById("mask").classList.add("mask-off");
}

該代碼定義了兩個函數，分別是showMask和hideMask。showMask函數用來顯示遮罩，在該函數中，我們通過document.getElementById獲取到id為“mask”的元素，然后去掉其class中的“mask-off”屬性，即可讓該元素顯示出來。hideMask函數用來隱藏遮罩，其原理與showMask函數相反，我們給元素添加上“mask-off”屬性，即可實現隱藏效果。

在實際使用中，我們只需要調用showMask或hideMask函數即可。如下所示：

顯示遮罩隱藏遮罩

在HTML代碼中，我們通過添加id為“mask”的div元素，并將其class設為“mask mask-off”，表示元素默認是隱藏的。當用戶點擊“顯示遮罩”按鈕時，執行showMask函數，將遮罩顯示出來；當用戶點擊“隱藏遮罩”按鈕時，執行hideMask函數，將遮罩隱藏起來。

通過CSS和JavaScript的配合，我們可以輕松實現遮罩效果，為網頁添加一些特殊的視覺效果。