在前端開發中，為了提高用戶體驗，我們需要在頁面中添加一些特效。其中之一就是在用戶進行某些操作時，界面的背景變暗，突出顯示某個特定的區域。這種效果可以通過 CSS 來實現。

首先，我們需要了解如何設置半透明度。CSS 通過 opacity 屬性來控制元素的透明度，它的值的范圍是 0 到 1，其中 0 表示完全透明，1 則表示完全不透明。我們可以通過設置全屏遮罩元素的 opacity 屬性值為 0.5 來實現半透明的效果。

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: #000000;
z-index: 9999;
}

上述代碼中，我們創建了一個類名為 .overlay 的樣式，同時將其設置為 fixed 定位，寬高為 100%，背景顏色為黑色，半透明度為 0.5，最后通過 z-index 設置其層級。

然后，我們需要添加一個事件，來控制這個遮罩元素的顯隱。我們可以通過 JavaScript 代碼來實現。針對點擊按鈕來展示或隱藏遮罩，我們可以使用下面的代碼：

const btn = document.getElementById("btn");
const overlay = document.querySelector(".overlay");
btn.addEventListener("click", function() {
overlay.style.display = "block";
});
overlay.addEventListener("click", function() {
overlay.style.display = "none";
});

上述代碼做了兩個事情：為按鈕添加了 click 事件，并在點擊時展示遮罩元素，同時為遮罩元素自身添加了 click 事件，并在點擊時隱藏遮罩元素。

總結：通過 CSS 的 opacity 屬性和 JavaScript 的事件綁定，我們可以輕松實現一個在用戶進行某些操作時，界面變暗的效果，提升頁面交互的友好度和美感。