在網站設計中，點擊背景是一個常見的效果。例如，當用戶單擊頁面上的某個區域時，背景會出現一個灰色層，以便突出顯示用戶正在瀏覽的內容。

要實現這個效果，可以利用CSS3的偽元素和transition屬性。以下是一個實現點擊背景效果的CSS代碼的示例：

/* 設置背景的樣式 */
body {
background-color: #f1f1f1; /* 設置背景顏色 */
overflow: hidden; /* 禁止頁面滾動 */
}
/* 設置灰色背景的樣式 */
body::after {
content: ""; /* 設置偽元素 */
display: block; /* 將偽元素設置為塊級元素 */
position: fixed; /* 將偽元素定位 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 將背景設置為半透明 */
opacity: 0; /* 設置初始狀態下的透明度為0 */
transition: opacity 0.3s ease-in-out; /* 設置過渡效果 */
}
/* 當點擊頁面時，改變背景的狀態 */
body.clicked::after {
opacity: 1; /* 將背景透明度設置為1，以顯示半透明層 */
}

在HTML文檔中，可以通過添加一個事件監聽器來處理用戶單擊頁面的事件：

document.addEventListener('click', function() {
document.body.classList.add('clicked'); /* 向body元素添加clicked類 */
});

通過這些CSS和JavaScript代碼，可以輕松地實現一個醒目的點擊背景效果。