一 簡單區(qū)分

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

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

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

1>使用img

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

2>使用背景圖

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

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

三 img標簽日常使用場景

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

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

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 ：背景圖片相對于元素固定 ，也就是說當元素內(nèi)容滾動時背景圖像不會跟著滾動，因為背景圖像總是要跟著元素本身。但會隨元素的祖先元素或窗體一起滾動。
復(fù)合：background：#000 url（） no-repeat center center fixed
五個值，位置沒有要求

補充
background-repeat:no-repeat; 圖片不平鋪
? :repeat; 平鋪/默認值
? :repeat-x; x軸/水平方向平鋪
? :repeat-y; y軸/垂直方向平鋪

image.png

背景顏色要寫在背景圖片屬性連寫后面 因為背景屬性連寫會有默認的背景顏色**

注意背景顏色有三種表示方法，其中rgba可以表示透明度
/* 透明第一種寫法: */
?            background-color:rgba(255,0,0,0.2);
 /* 透明第二種寫法: */
?            background-color: rgb(255,0,0 );
?            opacity: 0.2;

rgba()透明度不會透明內(nèi)容
opacity會透明內(nèi)容

css 3

background-size：cover；背景尺寸
cover：將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器
contain ：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內(nèi)
auto ：背景圖像的真實大小
percentage：用百分比指定背景圖像大小，不允許負值
width值/height值

background-clip 背景裁減
padding-box： 從padding區(qū)域（不含padding）開始向外裁剪背景。
border-box： 從border區(qū)域（不含border）開始向外裁剪背景。
content-box： 從content區(qū)域開始向外裁剪背景。
text： 從前景內(nèi)容的形狀（比如文字）作為裁剪區(qū)域向外裁剪，如此即可實現(xiàn)使用背景作為填充色之類的遮罩

background-origin 背景顯示的原點
padding-box： 從padding區(qū)域（含padding）開始顯示背景圖像。
border-box： 從border區(qū)域（含border）開始顯示背景圖像。
content-box： 從content區(qū)域開始顯示背景圖像。