CSS 是實現網頁美化和優化的一種重要工具。有時候，我們希望在網頁上添加一個灰色蒙層，以使其突出顯示或遮擋下面對象的區域。下面，我們就來學習一下如何通過 CSS 設置灰色蒙層。

首先，我們需要在 CSS 中新建一個類，以便對灰色蒙層進行樣式設置。我們將這個類命名為“gray-mask”。

.gray-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);  
z-index: 9999;
}

上述代碼中，我們使用了 position 屬性將蒙層固定在頁面上，并使用 top、bottom、left 和 right 屬性將其完全覆蓋。接著，我們使用了 background-color 屬性將背景顏色設置為半透明的黑色，其透明度通過 rgba() 方法來控制。由于 z-index 屬性的值為 9999，使得我們的灰色蒙層總是處于最上面一層。

在 HTML 中，我們只需要為需要添加灰色蒙層的對象指定之前我們設置的 gray-mask 類即可。

<div class="gray-mask">
<p>這里是蒙層中的內容</p>
</div>

上述代碼中，我們在一個 div 標簽中使用了 gray-mask 類。這使得該 div 標簽將會覆蓋整個頁面并添加灰色蒙層。

總之，CSS 提供了許多實現灰色蒙層的方法。上述代碼只是其中一種實現方式，您可以根據自己的需求和喜好來設置蒙層的大小、顏色和透明度。