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

1.img

<img src="圖片來源" alt="圖片沒法顯示時顯示圖片說明性文字" style="設置樣式屬性" />

img標籤雖然不是塊狀元素，可是能夠設置寬高，佔位，

img設置width後height會自適應匹配，若是設置height後width會自適應匹配,若是同時設置width，height，img圖片可能會變形

2.background-image

它是css的一個樣式，並不佔位，能夠結合background-size,background-repeat,background-position等屬性來設置圖片位置，大小等

它所在的元素必須指定height，不然背景圖片顯示不出來，能夠不指定width，若是不指定width，它的寬度則繼承父元素的寬度

3.它們之間的不一樣

• img是html標籤，佔位，background-image是CSS樣式，不佔位
• img是document對象能夠操做(好比：從document對象中刪除)，background-image是不能操做的
• 在網頁加載過程當中，img做爲網頁結構內容的一部分，會在加載結構的過程當中加載，而background-image做爲css樣式的一部分，會在結構加載完成後開始加載。(若是你引入了一個很大的圖片，在這個圖片下載完成以前，img後面的內容都不會顯示，而若是用css引入一樣的圖片，網頁結構和內容加載完成以後，纔開始加載背景圖片，不會影響你瀏覽網頁內容。)
• img標籤點擊會選中或放大圖片，background-image則不會

4.加載問題

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

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

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

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

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

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

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

5.加載失敗顯示問題

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

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

6.數據圖與非數據圖

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

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

1》使用img

• 做爲html結構內容的一部分
• 展現從後臺傳過來的數據
• 對圖片進行縮放操做
• 利於搜索引擎搜索時
• 有明確的語義化要求
• 圖片做爲頁面的組成部分而不是修飾部分
• 顯示圖片只給定寬或高且不能截斷圖片，而且保證圖片寬高比

2》使用背景圖

• 不是html結構的一部分
• 圖像代替文本使用時
• 縮短下載時間時
• 爲不一樣的屏幕分辨率展現不一樣的圖像時(media查詢時使用背景圖)
• 做爲背景圖片
• 禁止用戶保存圖片(點擊鼠標右鍵另存爲操做)
• 容許圖片拉伸，平鋪，截取等狀況

另論：記錄下background-size:100% 100% 與background-size:cover之間的區別

background-size:100% 100%;按容器 比例撐滿，圖片會變形

background-size:cover;把背景圖片放大到適合元素容器的尺寸，圖片比例不變