CSS遮罩是Web開發中非常重要的一部分，可以用來隱藏或突出顯示頁面上的元素，增強用戶體驗。本文將介紹如何使用CSS遮罩來實現Github的遮罩效果。

首先，我們需要創建一個包含Github徽標的HTML元素：

<div class="github">
<a >
<img src="github-logo.png" alt="Github logo">
</a>
</div>

現在我們來添加CSS樣式。首先，我們為github類添加CSS規則：

.github {
position: relative;
width: 80px;
height: 80px;
}

接下來，我們為偽元素創建樣式，并通過使用z-index屬性將偽元素放在Github標志上方：

.github::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}

最后，我們將Github元素的z-index屬性設為2，以確保它在偽元素上方顯示：

.github a {
position: relative;
z-index: 2;
}

現在，我們的Github元素已經設置為具有遮罩效果了。當用戶將鼠標懸停在Github標志上時，便會出現半透明黑色遮罩。如果你想要實現點擊Github元素時出現遮罩，只需要將偽類設置為:active即可。

這就是使用CSS遮罩實現Github遮罩效果的過程?，F在你可以將這個效果應用到自己的網站上，增強用戶交互體驗。