img標籤和background-image的區別和具體使用時機

最近在使用圖片過程當中，糾結到底使用img標籤仍是使用background-image屬性，翻閱資料和百度後做出下列理解。

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

img

從頁面元素來講，若是是頁面中做爲內容出現的圖片，好比廣告圖片、產品圖片，那麼這個必然是用img了，由於這個是頁面元素內容。頁面元素內容最關鍵的一點就是，當頁面沒有樣式的時候，仍是能一眼看過去就知道什麼是什麼。

img是一個行內元素，HTML標籤，是一個document對象，它是能夠操做的。好比更換img src的路徑能夠達到更換圖片的目的，也能夠移動它的位置，從document中移除等等操做

background-image

背景圖片，修飾性的內容，在頁面中無關緊要。有，是爲了讓頁面中視覺感覺上更美；無，並不影響用戶瀏覽網頁獲取內容。

background-image是背景圖片，是css的一個樣式，要使用background-sizing、background-position來設置其屬性。

裸奔

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

 

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

 

此處談到img標籤是行內元素，就此談下行內元素、塊級元素。

區別：

1.行內元素與塊級元素直觀上的區別

   行內元素會在一條直線上排列，都是同一行的，水平方向排列。

   塊級元素各佔據一行，垂直方向排列。塊級元素重新行開始結束接着一個斷行。

2.塊級元素能夠包含行內元素和塊級元素。行內元素不能包含塊級元素。

3.行內元素設置寬高無效，大小由內容決定。塊級元素能夠設置高，獨佔一行。