一. 簡單來說，img是內容部分的東西，css的background-image是修飾性的東西。
img------從頁面元素來說，如果是頁面中的圖片是作為內容出現的，比如廣告圖片，比如產品圖片，那么這個必然是用img了，因為這個是頁面元素內容。頁面元素內容最關鍵的一點就是，當頁面沒有樣式的時候，還是能一眼看過去就知道什么是什么……
background-image---背景圖片，修飾性的內容，在頁面中可有可無。有，是為了讓頁面中視覺感受上更美；無，並不影響用戶瀏覽網頁獲取內容。
二. 區別
1、background-image是背景圖片,是css的一個樣式。
<img/>是一個塊狀的元素，是html的一個標簽
2、<img/>是一個dom對象，可以使用js進行元素的操作。背景圖片不占位置。
3、一般來說，如果是裝飾性的圖片就使用background-img，如果和文體內容很相關就使用<img/>。
操作背景圖片 ，document.getElementById("id").style.backgroundImage = "url("+currentImage+")";//currentImage圖片地 址變量。
獲取css屬性document.getElementById("id").style.backgroundImage。
4、在網頁中的加載順序不一樣，html中的標簽<img/>是網頁結構（內容）的一部分會在加載結構的過程中加載， 以css背景圖存在的圖片background-image會等到dom結構加載完成（網頁的內容標簽全部顯示以后）才開始加載， 既網頁會先加載標簽<img/>的內容，再加載背景圖片background-image。如果你用引入了一個很大的圖片，那么在 這個圖片下載完成之前，img后的內容都不會顯示。而如果用css來引入同樣的圖片，網頁結構和內容加載完成之后 ，才開始加載背景圖片，不會影響你瀏覽網頁內容。
5、選擇的時候也要兼顧seo和標簽語義化，logo最好同時使用背景圖和<img/>標簽。
三.js操作
操作標簽<img/>
1、設置屬性document.getElementsByTagName("img")[0].setAttribute("src","newSrc"); 獲取屬性document.getElementsByTagName("img")[0].getAttribute("src");
或者：設置document.getElementsByTagName("img")[0].src="newSrc"; 獲取document.getElementsByTagName("img")[0].src;
獲取與設置寬高:document.getElementsByTagName("img")[0].style.width;document.getElementsByTagName ("img")[0].style.width = "320px";
2、圖片居中：一般來說可以用CSS中的①“text-align:center屬性，②margin:0 auto或③定位屬性”(position)就可以居中。 但是主要看是看你的頁面布局是怎樣的，是否用了定位。根據這些來判斷到頂使用怎樣的方法來使元素居中。 設置background屬性，詳細參考
1、background-image:url("");//設置圖片的背景圖片
2、background-color:#***||colorName||rgba（，，，）;//設置背景色
3、background-position:center;//設置背景圖片在父元素中的顯示位置，如果您僅規定了一個關鍵詞，那么第二個值將是"center"。接受三種值，百分比||描述值||像素值;
4、background-repeat:repeat||repeat-x||repeat-y||no-repeat||inherit;
5、background-origin: padding-box|border-box|content-box;//規定 background-position 屬性相對於什么位置來定位。
6、background-clip: border-box|padding-box|content-box;//background-clip 屬性規定背景的繪制區域。剪裁的依據。
7、background-attachment:scroll||fixed||inherit;//屬性設置背景圖像是否固定或者隨着頁面的其余部分滾動。
8、background-size:cover;//設置了圖片背景no-repeat之后，使用這個屬性可以讓圖片平鋪。詳細講解background-size