CSS中常常用到的一個重要功能就是圖片的隱藏和顯示。通過CSS的相關屬性，我們可以控制圖片的可見性、顯示方式和大小，從而達到實現隱藏或顯示圖片的效果。下面我們來詳細了解一下CSS圖片隱藏與顯示的實現方法。 一、圖片隱藏 1.使用display屬性完成圖片隱藏 當我們需要隱藏一張圖片時，可以使用CSS的display屬性來實現。通過給圖片所在的標簽添加display:none；的樣式規則，就可以將該標簽所包含的圖片隱藏掉。 例如，下面的代碼可以將class為img-hide的圖片隱藏掉：

.img-hide{
display:none;
}

2.使用visibility屬性進行圖片隱藏 跟display屬性不同，visibility屬性是調整元素可見性的屬性。當設置元素visibility屬性為hidden時，該元素仍占據文檔流，但不可見，而不像display屬性會直接去除該元素。 例如，下面的代碼可將class為img-hide的圖片設置為不可見狀態：

.img-hide{
visibility:hidden;
}

二、圖片顯示 1.使用display屬性展示圖片 如果我們需要展示一張被隱藏的圖片時，可以使用display屬性將其重新顯示出來。給圖片所在的標簽添加display:block；或display:inline-block；的樣式規則，就可以將該圖片重新顯示出來。不過需要注意的是，如果圖片在樣式規則中被設定一個固定的尺寸，那么在重新顯示時也需保持相同尺寸。 例如，下面的代碼可將class為img-show的圖片顯示出來：

.img-show{
display:block;
}

2.使用visibility屬性展示圖片 當使用visibility屬性進行圖片隱藏時，我們也可以通過設定visibility:visible；的樣式規則來重新展示該圖片。 例如，下面的代碼可將class為img-show的圖片顯示出來：

.img-show{
visibility:visible;
}

總結： 通過CSS的display屬性和visibility屬性，我們可以隱藏或展示圖片。display:none；的樣式規則可以將圖片直接移除，而visibility:hidden；的樣式規則則是將圖片保留在文檔流中，但令其不可見。展示圖片時，只需將display屬性或visibility屬性設定為block或visible即可。需注意在重新展示時，需設定相應的尺寸規則以保持圖片的正確顯示。