css中<img>與<background-image>的區別

background-image是背景圖片，是css的一個樣式

< img / >是一個區塊層級元素，它是一個圖片，是html的一個標籤

background-image是只能看的

< img / >是可以操作的。比如更換img src的路徑可以達到更換圖片的目的，也可以移動它的位置，從document中移除等等操作

background是CSS3的樣式

img 是HTML的標籤，兩者之間存在本質的區別

background-image存在於大的background中，其屬性設定多種多樣，變換較為豐富

img 上能寫字，能增加其餘想增加的元素

一般來說，如果是裝飾性的圖片就使用background-img，如果和文體內容很相關就使用img

在網頁載入的過程中，以css背景圖存在的圖片background-image會等到結構載入完成（網頁的內容全部顯示以後）才開始載入，而html中的標籤img是網頁結構（內容）的一部分會在載入結構的過程中載入，換句話講，網頁會先載入標籤img的內容，再載入背景圖片background-image，如果你用引入了一個很大的圖片，那麼在這個圖片下載完成之前，img後的內容都不會顯示。而如果用css來引入同樣的圖片，網頁結構和內容載入完成之後，才開始載入背景圖片，不會影響瀏覽網頁內容。

是這樣的，像極端的情況比如整個頁面的背景，我會毫不猶豫的使用background-image，但是某一個單獨的圖片，比如logo，只要載入出來就行，也不需要對它做什麼複雜的操作，我的理解是能在html裡實現的就不要再去CSS裡寫了，越簡單越好。但是看到一段代碼所有的圖片都是用div背景圖片寫的，我突然困惑了這樣到底是對是錯？能否有人給我講一下優劣？比如是載入方面有區別？SEO區別？多謝啦！

簡單來說，img是內容部分的東西，background-image是修飾性的東西。

稍微加點文字就是

img

從頁面元素來說，如果是頁面中的圖片是作為內容出現的，比如廣告圖片，比如產品圖片，那麼這個必然是用img了，因為這個是頁面元素內容。頁面元素內容最關鍵的一點就是，當頁面沒有樣式的時候，還是能一眼看過去就知道什麼是什麼……

background-image

背景圖片，修飾性的內容，在頁面中可有可無。有，是為了讓頁面中視覺感受上更美；無，並不影響使用者瀏覽網頁擷取內容。

其實說白了，背景圖片就是通過樣式載入後，讓頁面更漂亮而已，內容圖片就是為了展示給使用者的。假設有一天你的網頁沒有任何樣式的時候，那麼這個時候請想想你的網站上哪些圖片是給使用者看的，這樣就足夠了。

前景圖img是資料性的東西，屬於頁面要展現的內容。
背景圖是修飾性的東西，不要也罷。

比如，使用者映像，肯定是前景圖了；產品列表的圖片，也是前景圖了。 但是產品列表的圖片，有的左上方有個推薦的標籤，減價的標籤，肯定就是修飾咯。