CSS 點擊后背景圖片 在網頁設計中，點擊后背景圖片是一種常見的效果。它可以讓用戶感受到頁面的響應，提高用戶交互體驗。在本文中，我們將介紹如何使用 CSS 來實現這種效果。 首先，我們可以在 HTML 中定義一個元素，例如按鈕或鏈接，這個元素將會被添加點擊事件。在這個元素中，我們可以設置一個背景圖片。當元素被點擊時，我們可以使用 CSS 來修改背景圖片，從而實現點擊后的效果。 以下是一個例子：

<style>
.button {
background-image: url('image_1.jpg');
width: 100px;
height: 50px;
cursor: pointer;
}
.button:active {
background-image: url('image_2.jpg');
}
</style>
<button class="button">點擊我</button>

在上面的代碼中，我們定義了一個類名為 .button 的按鈕樣式，并設置一個背景圖片 image_1.jpg。該按鈕的寬度為 100 像素，高度為 50 像素，通過設置 cursor 屬性為 pointer 來將鼠標樣式變為手型。 然后，我們使用 :active 偽類來定義按鈕被點擊后的樣式。在這個樣式中，我們設置了一個不同的背景圖片 image_2.jpg。這樣，當用戶點擊按鈕時，按鈕的背景圖片將切換到 image_2.jpg，從而實現了點擊后的效果。 最后，我們在 HTML 中添加一個按鈕元素，并將其設置為 .button 樣式。當用戶單擊此按鈕時，它將有一個新的背景圖片。 通過這種方法，我們可以使用 CSS 來為網頁添加有趣的交互效果，并增強用戶體驗。