1.載入問題

背景圖片會等到html結構載入完成才開始載入

img標籤是網頁結構的一部分，會在html結構載入的時候載入

在網頁載入的過程中，背景圖片會等到結構載入完成（網頁的內容全部顯示以後）才開始載入，而img標籤

是網頁結構（內容）的一部分會在html結構載入的過程中載入，換句話講，網頁會先載入img標籤的內容，

再載入背景圖片，如果你用引入了一個很大的圖片，那麼在這個圖片下載完成之前，img後的內容都不會顯

示。而如果用css來引入同樣的圖片，網頁結構和內容載入完成之後，才開始載入背景圖片，不會影響你瀏

覽網頁內容。(即，img是內容性的，背景圖是修飾性的)

2.載入失敗顯示問題

背景圖片在載入失敗或路徑找不到時，不會顯示圖片標記，

img標籤在載入失敗或找不到路徑時，會顯示一個撕裂的小圖示標記

3.資料圖與非資料圖

所謂資料圖就是從後臺獲取的圖片，一般就用img標籤顯示，其他的圖片一般就作為背景圖展示

4.何時用img，何時用背景圖

1》使用img

• 作為html結構內容的一部分
• 展示從後臺傳過來的資料
• 對圖片進行縮放操作
• 利於搜尋引擎搜尋時

2》使用背景圖

• 不是html結構的一部分
• 影象代替文字使用時
• 縮短下載時間時
• 為不同的螢幕解析度展示不同的影象時(media查詢時使用背景圖)

相關資料：

作者：smile.轉角

QQ：493177502