在CSS中，我們常常需要使用圖片覆蓋元素的背景樣式。不過有時候，我們會發現這些圖片覆蓋后不能被點擊。這是為什么呢？

問題出在CSS的z-index屬性上。z-index屬性用來控制元素在混合盒模型（z軸）上的堆疊順序。即，當兩個元素重疊時，z-index屬性較大的元素會覆蓋z-index屬性較小的元素。

我們來看一個例子：

<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: black;
}
.image {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.button {
position: absolute;
bottom: 0;
right: 0;
}
</style>
<div class="container">
<img src="bg.png" class="image">
<button class="button">Click me!</button>
</div>

在上面的例子中，我們在一個黑色的方塊中加入一張背景圖片，并在圖片上面放置一個按鈕。我們設置圖片的z-index為-1，表示它應該位于其他元素的下層。這樣一來，圖片就會完全覆蓋下面的黑色區域。

但是我們發現，按鈕卻不能被點擊。這是因為按鈕被圖片覆蓋了，雖然我們看不到圖片，但它還是存在于按鈕下方。所以，可以通過給圖片設置pointer-events：none，使按鈕能夠被點擊，如下：

.image{
pointer-events: none;
}

這樣一來，圖片就不再攔截鼠標事件了，整個方塊中的按鈕就能正常使用了。