【html】使用img標籤和背景圖片之間的區別

1.加載問題

背景圖片會等到html結構加載完成纔開始加載

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

在網頁加載的過程當中，背景圖片會等到結構加載完成（網頁的內容所有顯示之後）纔開始加載，而img標籤

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

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

示。而若是用css來引入一樣的圖片，網頁結構和內容加載完成以後，纔開始加載背景圖片，不會影響你瀏

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

2.加載失敗顯示問題

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

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

3.數據圖與非數據圖

所謂數據圖就是從後臺獲取的圖片，通常就用img標籤顯示，其餘的圖片通常就做爲背景圖展現

4.什麼時候用img，什麼時候用背景圖

1》使用img

• 做爲html結構內容的一部分
• 展現從後臺傳過來的數據
• 對圖片進行縮放操做
• 利於搜索引擎搜索時

2》使用背景圖

• 不是html結構的一部分
• 圖像代替文本使用時
• 縮短下載時間時
• 爲不一樣的屏幕分辨率展現不一樣的圖像時(media查詢時使用背景圖)

 

相關資料：http://www.javashuo.com/article/p-mxuseuww-dn.html

做者：smile.轉角

QQ：493177502