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

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

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

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

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

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