本文目錄導(dǎo)讀：

1. 使用display屬性
2. 使用visibility屬性

CSS控制圖片顯示數(shù)量的方法

在CSS中，我們可以通過設(shè)置圖片元素的顯示屬性來控制圖片的顯示數(shù)量，下面我們將詳細(xì)介紹如何通過CSS實(shí)現(xiàn)只顯示一張圖片的效果。

使用display屬性

我們可以通過設(shè)置圖片元素的display屬性為"none"來隱藏圖片，如果我們只想顯示***張圖片，我們可以將其他圖片的display屬性設(shè)置為"none"。

HTML代碼：

<img src="image1.jpg" id="image1" />
<img src="image2.jpg" id="image2" />
<img src="image3.jpg" id="image3" />

CSS代碼：

#image2 {
    display: none;
}
#image3 {
    display: none;
}

使用visibility屬性

除了display屬性外，我們還可以使用visibility屬性來控制圖片的可見性，將visibility屬性設(shè)置為"hidden"可以隱藏圖片，而不會(huì)影響頁面的布局。

CSS代碼：

#image2 {
    visibility: hidden;
}
#image3 {
    visibility: hidden;
}

三、使用max-width和max-height屬性

我們還可以利用max-width和max-height屬性來控制圖片的顯示尺寸，從而實(shí)現(xiàn)只顯示一張圖片的效果，我們可以將圖片的max-width和max-height設(shè)置為0，這樣圖片就不會(huì)顯示了。

CSS代碼：

#image2 {
    max-width: 0;
    max-height: 0;
}
#image3 {
    max-width: 0;
    max-height: 0;
}

通過以上方法，我們可以利用CSS來控制圖片的顯示數(shù)量，實(shí)現(xiàn)只顯示一張圖片的效果。