本文目錄導讀：

1. 使用CSS的display屬性
2. 使用CSS的opacity屬性
3. 使用CSS的visibility屬性

CSS技巧：圖片初始不可見處理

在網(wǎng)頁設計中，我們經(jīng)常需要控制圖片的出現(xiàn)時機，有時我們希望圖片在頁面加載時先不出現(xiàn)，等到頁面完全加載完畢或者用戶觸發(fā)某個動作后再展示，這樣的效果可以通過CSS來實現(xiàn)，本文將介紹幾種常用的方法來實現(xiàn)這一效果。

使用CSS的display屬性

我們可以利用CSS的display屬性來控制圖片的初始可見性，我們可以設置圖片的初始display屬性為none，這樣圖片在頁面加載時就不會顯示，等到需要顯示圖片時，再通過JavaScript動態(tài)改變其display屬性為block或inline-block。

使用CSS的opacity屬性

除了使用display屬性，我們還可以利用CSS的opacity屬性來實現(xiàn)圖片初始不可見的效果，將圖片的opacity設置為0，可以讓圖片在頁面加載時雖然占據(jù)空間但不顯示內容，等到需要顯示時再通過JavaScript改變其opacity為1。

使用CSS的visibility屬性

除了上述兩種方法，我們還可以使用CSS的visibility屬性來控制圖片的可見性，將visibility設置為hidden可以讓圖片在頁面加載時不顯示，但保留其空間位置，與display:none不同的是，使用visibility:hidden的圖片仍然會保留其布局空間，只是內容不可見。

三種方法都可以實現(xiàn)圖片初始不可見的效果，具體使用哪種方法可以根據(jù)實際需求來選擇，需要注意的是，這些方法都需要結合JavaScript來實現(xiàn)動態(tài)控制圖片的可見性，為了保證頁面加載速度和用戶體驗，建議在頁面完全加載完畢后再展示圖片。