在網頁設計中，有時候我們需要在頁面中顯示一張圖片，但是又不想讓它一開始就顯示出來，而是需要等到用戶觸發某些事件后再顯示出來。這時候，我們可以使用CSS來實現圖片的隱藏與顯示。接下來，讓我們來了解一下如何使用CSS來實現圖片的隱藏與顯示。 首先，我們需要在HTML頁面中引入圖片，可以使用img標簽來實現，如下所示：

這是一張圖片：

這是最基本的引入圖片的方法，但是如果我們要實現圖片的隱藏與顯示，就需要用到CSS了。下面我們來看一下具體的實現步驟。 1. 隱藏圖片 我們可以使用CSS中的display屬性來實現圖片的隱藏。display屬性有多種取值，其中none表示隱藏，block表示顯示，inline表示默認顯示。我們可以將圖片的display屬性設置為none，這樣圖片就會被隱藏起來。代碼如下所示：

img{
display:none;
}

在上面的代碼中，我們使用了img選擇器來選中img標簽，然后將其display屬性設置為none，這樣圖片就會被隱藏起來了。 2. 顯示圖片 要讓圖片顯示出來，我們需要在用戶觸發某些事件后，使用CSS將其display屬性設置為block或inline。例如，我們可以在用戶點擊一個按鈕后將圖片顯示出來。代碼如下所示：

這是一張圖片：

顯示圖片

.hidden{
display:none;
}
.show{
display:block;
}

在上面的代碼中，我們給img標簽添加了一個class名為hidden，這樣圖片一開始就會被隱藏起來。然后，我們在按鈕上綁定了一個onclick事件，當用戶點擊按鈕時，調用showImg函數，將圖片的class屬性設置為show，這樣圖片就會被顯示出來了。 總結：通過上面的介紹，我們了解到了如何使用CSS來實現圖片的隱藏與顯示。這樣的技巧可以讓我們更加靈活地控制頁面中的元素，使得頁面更加美觀和易用。