在網頁設計中，經常使用圖片來裝飾頁面。但是有些情況下，我們希望圖片在特定的條件下才顯示，而在其他情況下隱藏。這時候就需要使用CSS來控制圖片的隱藏和顯示。 通過CSS，可以使用display屬性來控制圖片的隱藏和顯示。當display屬性設置為“none”時，圖片就被隱藏了，當設置為“block”時，圖片就顯示出來了。 下面是一個示例，演示如何通過CSS來隱藏和顯示圖片。 假設我們有一張名為“image.png”的圖片，我們希望當屏幕寬度小于600像素時，隱藏這張圖片，當屏幕寬度大于等于600像素時，顯示這張圖片。我們可以使用CSS媒體查詢來實現這個效果：

@media screen and (max-width: 600px) {
/* 當屏幕寬度小于600像素時，隱藏圖片 */
img {
display: none;
}
}
@media screen and (min-width: 600px) {
/* 當屏幕寬度大于等于600像素時，顯示圖片 */
img {
display: block;
}
}

通過上面的代碼，我們定義了兩個媒體查詢，一個是當屏幕寬度小于600像素時，另一個是當屏幕寬度大于等于600像素時。在第一個媒體查詢中，我們將圖片的display屬性設置為“none”，表示隱藏圖片；在第二個媒體查詢中，我們將圖片的display屬性設置為“block”，表示顯示圖片。 通過CSS控制圖片的隱藏和顯示，可以讓網頁更加靈活。無論是為了適應不同的屏幕尺寸，還是為了實現一些動態效果，都可以使用CSS來達到目的。