背景圖片標簽是什么？

一 簡單區分

背景圖片會等到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五個值，位置沒有要求