一, img和background-image兩者本身的意義
< img / >是一個HTML元素，它是一個圖片，是html的一個標籤
background-image是背景圖片，是css的一個樣式
二, 標和本
img 是HTML的標籤(本)
< img / >是可以操作的。比如更換img src的路徑可以達到更換圖片的目的，也可以移動它的位置，從document中移除等等操作
img 上能寫字，能增加其餘想增加的元素
background-image是CSS的樣式(標)
background-image是隻能看的, background-image存在於大的background中，其屬性設置多種多樣，變換較爲豐富
這是兩者的本質區別！
三, 什麼時候使用img和background-image
一般來說，如果是裝飾性的圖片就使用background-img，如果和文體內容很相關就使用img
在網頁加載的過程中，以CSS背景圖存在的圖片background-image會等到結構加載完成（網頁的內容全部顯示以後）纔開始加載，而HTML中的標籤img是網頁結構（內容）的一部分會在加載結構的過程中加載。
換句話講，網頁會加載標籤img的內容，比加載背景圖片background-image的時機要早。
也就意味着, 如果你用引入了一個很大的圖片，那麼在這個圖片下載完成之前，img後的內容都不會顯示。而如果用CSS來引入同樣的圖片，網頁結構和內容加載完成之後，纔開始加載背景圖片，不會影響瀏覽網頁內容。
四, 說重點
簡單來說，img是內容部分的東西，background-image是修飾性的東西。
加點文字修飾就是:
img
從頁面元素來說，如果是頁面中的圖片是作爲內容出現的，比如廣告圖片，比如產品圖片，那麼這個必然是用img了，因爲這個是頁面元素內容。頁面元素內容最關鍵的一點就是，當頁面沒有樣式的時候，還是能一眼看過去就知道什麼是什麼……
background-image
背景圖片，修飾性的內容，在頁面中可有可無。有，是爲了讓頁面中視覺感受上更美；無，並不影響用戶瀏覽網頁獲取內容。
五, 只看着一句話就行了！
其實說白了，背景圖片就是通過樣式加載後，讓頁面更漂亮而已，內容圖片就是爲了展示給用戶的。假設有一天你的網頁沒有任何樣式的時候，那麼這個時候請想想你的網站上哪些圖片是給用戶看的，這樣就足夠了。