今天做項目中，用background顯示了二維碼和一些文字，但顯示到頁面上時，二維碼和圖片都變得模糊了。於是將圖片調整、放大，但在放大后，作為背景圖片的它則顯示不全，無奈之下用了backgroung-size。但background-size在IE下不兼容，故最后使用了img+width+height的做法。
下面我們就來看看img和bg的區別。
一、從解析機制看
Img屬於html標簽，background是css方法。一個頁面由html、css、js組成，按照瀏覽器解析機制，html標簽優先解析。大家都知道css文件會放在head加載，但是這並不意味着它會立即執行，而是在html加載完后才執行的。所以重要的元素，如logo就應該使用img，我也犯了這個錯誤啊，改~~~。
如果僅僅是為了顯示一張圖片，比如banner、廣告圖等，建議采用background方式。因為不重要的自動往后排，避免占用帶寬，造成數據阻塞。
如果圖片很多，這里又出現一個新的問題，不同的瀏覽器支持的並發加載數量是不一樣的，（最新測試）IE是10個，FF是10個，圖片多，就會出現嚴重的延遲或者404，因為圖片加載慢會影響到頁面主要數據呈現，那么讓用戶看到的都是空白，你好意思讓他繼續等下去嗎！所以，如果不采用lazyload還是采用background比較好。
Img標簽優點是自閉和，可以避免空標簽出現（空標簽也是w3c驗證的內容之一）。采用background方式就會出現空標簽，bootstrap中的icon都是用i標簽加入的，而i標簽中是空內容，這樣就產生了空標簽（並不是說這樣做不好，利弊等會聊）。
二、從SEO角度看
剛才說了，Img標簽是自閉和的，不能添加文本內容，但是，Img有一個alt屬性，而且這個屬性在w3c標准中，要求必須有，這樣做的優點還是很多的。
第一，圖片比較大，或者用戶網速比較窩火的時候，加載失敗了，至少還有文字提示告訴用戶這里是個什么內容的圖片。如果用戶非要看這個圖，那就多刷幾次去加載。另外，alt屬性有利於輔助閱讀，尤其是對盲人朋友，他們使用閱讀器瀏覽頁面，如果沒有文本提示，就太不厚道了。
第二，alt屬性有利於SEO，搜索引擎實現很好的圖像識別還是有一段路要走。
當然缺點也是有滴：
第一，Img加載的圖片是通過src拿到的，如果HTML代碼不允許修改，那怎么換圖，只有同名文件替換，但是有可能遇到304狀態，需要服務器端做相應的設置。這時background的優點就出來了，換皮膚就是這個栗子。
第二，如果圖片顯示區域空間大小是預留的，那么圖片必須和預留的空間一致，否則圖片要么被拉伸要么被壓縮，都不是等比例操作。當然，避免這種問題就需要前端和視覺設計師遵守一定的規范。
三、語義化角度
Background和語義化不沾邊了，Img是HTML標簽，語義明確。
建議：重要的需要優先加載的圖片最好采用img。不重要的圖片最好采用background。
做SEO是最方便的還是background，圖片是放在背景上的，前景寫內容，兩不誤。如果不想讓內容顯示出來，就加text-indent， -99999你懂的。（以前有這種玩法，是搜索引擎算法單一的年代，關鍵字比重高 排名就靠前）。
剛才提了一下bootstrap的background方法，bootstrap的做法是用background設置icon，icon的使用太靈活了，所以必須模塊化，語義化先靠邊站，魚與熊掌不可兼得。PS：bootstrap v3之后采用了icon font
其次icon的重要性真不高，放在最后加載還減少了帶寬占用量，提高PV速度。
img標簽語義很明確不能亂用，所以bootstrap采用無語義的i標簽來設置icon也挺好。PS：自己項目中使用無語義標簽要注意是否向前兼容，要關注HTML5中的定義。