背景圖片標(biāo)簽是什么？

一 簡單區(qū)分

背景圖片會等到html結(jié)構(gòu)加載完成才開始加載img標(biāo)簽是網(wǎng)頁結(jié)構(gòu)的一部分，會在html結(jié)構(gòu)加載的時(shí)候加載

當(dāng)加載失敗時(shí)，背景圖片在加載失敗或路徑找不到時(shí)，不會顯示圖片標(biāo)記，img標(biāo)簽在加載失敗或找不到路徑時(shí)，會顯示一個(gè)撕裂的小圖標(biāo)標(biāo)記

二 何時(shí)用img，何時(shí)用背景圖

1>使用img

作為html結(jié)構(gòu)內(nèi)容的一部分展示從后臺傳過來的數(shù)據(jù)對圖片進(jìn)行縮放操作利于搜索引擎搜索時(shí)

2>使用背景圖

不是html結(jié)構(gòu)的一部分圖像代替文本使用時(shí)縮短下載時(shí)間時(shí)為不同的屏幕分辨率展示不同的圖像時(shí)(media查詢時(shí)使用背景圖)

所謂數(shù)據(jù)圖就是從后臺獲取的圖片，一般就用img標(biāo)簽顯示，其他的圖片一般就作為背景圖展示

三 img標(biāo)簽日常使用場景

圖片縮放可以使用rem布局頁面，給盒子定一個(gè)固定寬度，盒子下面的img標(biāo)簽給寬度100%（即給父盒子固定的rem寬度（寬跟圖片寬一致），子級img標(biāo)簽寬度100%繼承父級寬度即可）這樣可以解決圖片在頁面放大縮小的時(shí)候 圖片等比縮放，并且保證盒子之間的間距不變

注意給img標(biāo)簽如下使用，會出現(xiàn)盒子與盒子之間的間距被侵占或者間隔變大

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

四 css背景圖片的屬性

背景類屬性（css2的5個(gè) css3 新增3個(gè)）

css 2

background-color：背景顏色background-image：url（“圖片路徑”）背景圖片的路徑background-repeat：no-repeat； 背景圖片的平鋪方式background-position：center center 背景圖片的定位background-attachment：fixed 背景圖片是否滾動fixed ：背景圖片相對于窗體固定scroll ：背景圖片相對于元素固定 ，也就是說當(dāng)元素內(nèi)容滾動時(shí)背景圖像不會跟著滾動，因?yàn)楸尘皥D像總是要跟著元素本身。但會隨元素的祖先元素或窗體一起滾動。復(fù)合：background：#000 url（） no-repeat center center fixed五個(gè)值，位置沒有要求