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

.img-hide{
display:none;
}

2.使用visibility屬性進(jìn)行圖片隱藏 跟display屬性不同，visibility屬性是調(diào)整元素可見性的屬性。當(dāng)設(shè)置元素visibility屬性為hidden時(shí)，該元素仍占據(jù)文檔流，但不可見，而不像display屬性會(huì)直接去除該元素。 例如，下面的代碼可將class為img-hide的圖片設(shè)置為不可見狀態(tài)：

.img-hide{
visibility:hidden;
}

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

.img-show{
display:block;
}

2.使用visibility屬性展示圖片 當(dāng)使用visibility屬性進(jìn)行圖片隱藏時(shí)，我們也可以通過(guò)設(shè)定visibility:visible；的樣式規(guī)則來(lái)重新展示該圖片。 例如，下面的代碼可將class為img-show的圖片顯示出來(lái)：

.img-show{
visibility:visible;
}

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