CSS 遮罩層是一個很有用的技術，經常用于創建彈出窗口或者阻止用戶在操作頁面的其他部分時繼續進行交互。在這篇文章中，我們將會學習如何創建一個黑色的遮罩層。

/* 創建遮罩層 */
.overlay {
position: fixed; /* 指定定位方式為固定 */
top: 0; /* 距離頂部的位置為 0 */
left: 0; /* 距離左側的位置為 0 */
width: 100%; /* 寬度為整個頁面的寬度 */
height: 100%; /* 高度為整個頁面的高度 */
background-color: rgba(0, 0, 0, 0.5); /* 指定背景顏色為黑色半透明 */
z-index: 9999; /* 指定圖層疊加順序為最上層 */
}

如上述代碼所示，我們首先給遮罩層設定一個固定的定位方式，并將它的位置設為距離頁面的上部和左部都為 0。隨后，我們指定了其寬度和高度，分別設置為整個頁面的寬度和高度，以使其覆蓋整個頁面。最后，我們使用background-color配置指定了遮罩層的背景顏色為 RGBA 表示的黑色半透明，使其能夠顯示在頁面的頂部。為了使遮罩層在頁面中顯示在最上方，我們還將其 z-index 屬性設定為 9999。

我們現在已經成功地創建了一個黑色的遮罩層，無論您是需要創建彈出窗口或者阻止用戶繼續進行交互，這種遮罩層的方式都非常實用。希望這篇文章能夠幫助您學習如何創建 CSS 遮罩層，讓您的網站和應用程序更加完美。