遮罩效果是在網(wǎng)頁設(shè)計中經(jīng)常用到的一種效果，它可以將某一區(qū)域進行遮蓋，以達到一種特殊的視覺效果。在本文中，我們將介紹如何使用CSS和JavaScript來實現(xiàn)遮罩效果。

.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屬性設(shè)為fixed，使其可以覆蓋整個頁面。其background-color屬性用來設(shè)置遮罩的顏色，這里用了半透明黑色（rgba(0, 0, 0, 0.5)）。z-index屬性設(shè)置遮罩層級，使其位于其他元素之上。

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

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

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

在實際使用中，我們只需要調(diào)用showMask或hideMask函數(shù)即可。如下所示：

顯示遮罩隱藏遮罩

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

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