這篇文章將為大家詳細(xì)講解有關(guān)html中圖片顯示方式-----img與background的區(qū)別是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供鶴山企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為鶴山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

一、從解析機(jī)制看

img屬于html標(biāo)簽，background是css方法。一個(gè)頁面由html、css、js組成，按照瀏覽器解析機(jī)制，html標(biāo)簽優(yōu)先解析。大家都知道css文件會放在head加載，但是這并不意味著它會立即執(zhí)行，而是在html加載完后才執(zhí)行的。所以重要的元素，如logo就應(yīng)該使用img。

如果僅僅是為了顯示一張圖片，比如banner、廣告圖等，建議采用background方式。因?yàn)椴恢匾淖詣?dòng)往后排，避免占用帶寬，造成數(shù)據(jù)阻塞。

如果圖片很多，這里又出現(xiàn)一個(gè)新的問題，不同的瀏覽器支持的并發(fā)加載數(shù)量是不一樣的，（最新測試）IE是10個(gè)，F(xiàn)F是10個(gè)，圖片多，就會出現(xiàn)嚴(yán)重的延遲或者404，因?yàn)閳D片加載慢會影響到頁面主要數(shù)據(jù)呈現(xiàn)，那么讓用戶看到的都是空白，你好意思讓他繼續(xù)等下去嗎！所以，如果不采用lazyload還是采用background比較好。

img標(biāo)簽優(yōu)點(diǎn)是自閉和，可以避免空標(biāo)簽出現(xiàn)（空標(biāo)簽也是w3c驗(yàn)證的內(nèi)容之一）。采用background方式就會出現(xiàn)空標(biāo)簽，bootstrap中的icon都是用i標(biāo)簽加入的，而i標(biāo)簽中是空內(nèi)容，這樣就產(chǎn)生了空標(biāo)簽（并不是說這樣做不好，利弊等會聊）。

二、從SEO角度看

剛才說了，img標(biāo)簽是自閉和的，不能添加文本內(nèi)容，但是，img有一個(gè)alt屬性，而且這個(gè)屬性在w3c標(biāo)準(zhǔn)中，要求必須有，這樣做的優(yōu)點(diǎn)還是很多的。

第一，圖片比較大，或者用戶網(wǎng)速比較窩火的時(shí)候，加載失敗了，至少還有文字提示告訴用戶這里是個(gè)什么內(nèi)容的圖片。如果用戶非要看這個(gè)圖，那就多刷幾次去加載。另外，alt屬性有利于輔助閱讀，尤其是對盲人朋友，他們使用閱讀器瀏覽頁面，如果沒有文本提示，就太不厚道了。

第二，alt屬性有利于SEO，搜索引擎實(shí)現(xiàn)很好的圖像識別還是有一段路要走。

當(dāng)然缺點(diǎn)也是有滴：

第一，Img加載的圖片是通過src拿到的，如果HTML代碼不允許修改，那怎么換圖，只有同名文件替換，但是有可能遇到304狀態(tài)，需要服務(wù)器端做相應(yīng)的設(shè)置。這時(shí)background的優(yōu)點(diǎn)就出來了，換皮膚就是這個(gè)栗子。

第二，如果圖片顯示區(qū)域空間大小是預(yù)留的，那么圖片必須和預(yù)留的空間一致，否則圖片要么被拉伸要么被壓縮，都不是等比例操作。當(dāng)然，避免這種問題就需要前端和視覺設(shè)計(jì)師遵守一定的規(guī)范。

三、語義化角度

background和語義化不沾邊了，img是HTML標(biāo)簽，語義明確。

建議：重要的需要優(yōu)先加載的圖片最好采用img。不重要的圖片最好采用background。

做SEO是最方便的還是background，圖片是放在背景上的，前景寫內(nèi)容，兩不誤。如果不想讓內(nèi)容顯示出來，就加text-indent， -99999你懂的。（以前有這種玩法，是搜索引擎算法單一的年代，關(guān)鍵字比重高 排名就靠前）。

剛才提了一下bootstrap的background方法，bootstrap的做法是用background設(shè)置icon，icon的使用太靈活了，所以必須模塊化，語義化先靠邊站，魚與熊掌不可兼得。PS：bootstrap v3之后采用了icon font

其次icon的重要性真不高，放在最后加載還減少了帶寬占用量，提高PV速度。

img標(biāo)簽語義很明確不能亂用，所以bootstrap采用無語義的i標(biāo)簽來設(shè)置icon也挺好。PS：自己項(xiàng)目中使用無語義標(biāo)簽要注意是否向前兼容，要關(guān)注HTML5中的定義

關(guān)于html中圖片顯示方式-----img與background的區(qū)別是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。