css背景圖與html插入img的區別

標籤：blog   tar   http   c   get   com   

1.寫在css裡面的圖片是以背景圖形式存在的，而寫在html裡的是以

標籤形式存在的，在網頁載入的過程中，以css背景圖存在的圖片會等到結構載入完成（網頁的內容全部顯示以後）才開始載入，而html中的

標籤是網頁結構（內容）的一部分會在載入結構的過程中載入。換句話講，網頁會先載入

標籤的內容，再載入背景圖片，如果你用

引入了一個很大的圖片，那麼在這個圖片下載完成之前，

之後的內容都不會顯示。而如果用css來引入同樣的圖片，網頁結構和內容載入完成之後，才開始載入背景圖片，不會影響你瀏覽網頁內容。
2.通常是非內容的圖片就寫在css裡面，如果是內容性的圖片就寫在html裡面，
 打個比方，你要做一個有漂亮邊框的相簿。那麼修飾邊框的圖片就寫在css裡面，相框裡面的內容照片就寫在html裡面。
網頁設計方向是表現層和內容層分離，css管表現，也就是顯示效果，html管結構，內容結構的劃分，這樣代碼要簡潔易維護一些。

3.瀏覽器讀取頁面，css背景圖和img圖片都會下載到本機快取檔案夾。至於緩衝多久，每個快取檔案有個標記的，瀏覽器會判斷要不要向伺服器重新發請求擷取資源。至於這個標記是怎麼樣的，要看伺服器上是怎麼設定的。所以，css背景圖和img圖片在網頁中都可以重複使用。

4.圖片做為背景，在圖片沒載入的時候或者載入失敗的時候，不會有個圖片的佔位標記，不會出現紅叉。

新浪博友