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

標籤：

　　一直以來都認為css背景圖與直接插入img圖片的效果是差不多的，直到最近拜讀了一位大神的作品，發現大部分圖片都是通過背景圖形式顯示的，於是在此總結了下二者的區別：

1. css中的圖片以背景圖形式存在，寫在html中的圖片以標籤形式存在。而在網頁載入過程中，以css背景存在的圖片會等到html結構載入完成才開始載入，而html中的img標籤是網頁結構（內容）的一部分會在載入結構的過程中載入。

附：在一個單純由Html和Css組成的頁面中，背景圖片總是最後載入的，那麼假若我們想要使用較小的背景圖片作為預留位置，用於在載入較大的圖片或者Flash檔案時給使用者以提示，大部分時候恐怕是達不到效果的，因為背景圖片有時甚至會在大圖片或Flash檔案載入完成之後才會被載入。

2. 通常非內容的圖片（即用來修飾頁面的元素）就寫在css裡，如果是內容性的圖片就寫在html中。比如，你要做一個漂亮相框的相簿，那麼修飾邊框的圖片就寫在css裡，相框裡的內容照片就寫在html中。

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

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