一 簡單區分

背景圖片會等到html結構載入完成才開始載入img標籤是網頁結構的一部分，會在html結構載入的時候載入

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

二 何時用img，何時用背景圖

1>使用img

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

2>使用背景圖

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

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

三 img標籤日常使用場景

圖片縮放可以使用rem佈局頁面，給盒子定一個固定寬度，盒子下面的img標籤給寬度100%（即給父盒子固定的rem寬度（寬跟圖片寬一致），子級img標籤寬度100%繼承父級寬度即可）這樣可以解決圖片在頁面放大縮小的時候 圖片等比縮放，並且保證盒子之間的間距不變

注意給img標籤如下使用，會出現盒子與盒子之間的間距被侵佔或者間隔變大

img{ width: auto; height: auto; max-width: 100%; max-height: 100%; }

四 css背景圖片的屬性

背景類屬性（css2的5個 css3 新增3個）

css 2

background-color：背景顏色background-image：url（“圖片路徑”）背景圖片的路徑background-repeat：no-repeat； 背景圖片的平鋪方式background-position：center center 背景圖片的定位background-attachment：fixed 背景圖片是否滾動fixed ：背景圖片相對於窗體固定scroll ：背景圖片相對於元素固定 ，也就是說當元素內容滾動時背景影象不會跟著滾動，因為背景影象總是要跟著元素本身。但會隨元素的祖先元素或窗體一起滾動。複合：background：#000 url（） no-repeat center center fixed五個值，位置沒有要求