在網頁設計中，我們經常會遇到需要點擊某個區域顯示或隱藏圖片的需求。今天，我將介紹一種使用 CSS 實現點擊空白處顯示圖片的方法。

首先，我們需要在 HTML 文件中定義一個包含圖片的容器元素，并通過 CSS 將其隱藏起來：

CSS 代碼：
.image-box {
display: none;
}

接下來，我們需要在頁面中添加一個空白的背景層，用于捕捉點擊事件：

CSS 代碼：
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}

在 CSS 中，我們使用position: fixed;將背景層固定在頁面上。將它的z-index設為比圖片容器更低的值，保證圖片容器可以在其上方顯示。

現在，我們需要在 JavaScript 中實現點擊事件。當用戶點擊空白處時，我們將顯示圖片容器；當用戶再次點擊空白處，則將隱藏它。

JavaScript 代碼：
var overlay = document.querySelector('.overlay');
var imageBox = document.querySelector('.image-box');
overlay.addEventListener('click', function() {
if (imageBox.style.display === 'none') {
imageBox.style.display = 'block';
} else {
imageBox.style.display = 'none';
}
});

這段代碼監聽了空白背景層的點擊事件。當用戶點擊空白處時，判斷圖片容器是否已經顯示，如果是，則隱藏它；如果不是，則顯示它。

最后，我們需要通過 CSS 使得圖片容器在頁面上居中顯示。

CSS 代碼：
.image-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這段代碼將圖片容器的位置設為固定定位，并通過transform: translate(-50%, -50%);居中它。現在，點擊空白處就可以顯示或隱藏圖片了。