在前端開(kāi)發(fā)的時(shí)候經(jīng)常會(huì)需要插入圖片作為背景的情況，常用的方式一般是插入<img>標(biāo)簽，或者使用background屬性，那么你知道這兩種屬性有什么區(qū)別嗎？

      img方式

      background屬性方式

      單從代碼上看好像通過(guò)背景的方式插入圖片比較復(fù)雜一點(diǎn)，復(fù)雜在哪呢？我們看一下背景圖的插入，需要寫(xiě)一個(gè)容器，并且要給這個(gè)容器設(shè)定一個(gè)寬高才能顯示內(nèi)容，如果容器的高度為0，那么這張圖片就插入不進(jìn)去了。img圖片不一樣，它屬于html標(biāo)簽，相當(dāng)于內(nèi)容跟文字一樣只要放在頁(yè)面中就可以展示出來(lái)。 除此之外，如果你想要實(shí)現(xiàn)文字內(nèi)容在圖片上的效果，可以使用背景圖片，img圖片上本身是不能放下文字的。

      好了，看完了這些是不是明白一點(diǎn)img圖片與background圖片的區(qū)別了呢？我們一起再來(lái)總結(jié)一下吧

      1、img圖片直接插入使用，background圖片需要寫(xiě)一個(gè)容器并設(shè)置寬高才能插入使用

      2、img圖片跟文字一樣屬于內(nèi)容，本身是不會(huì)讓文字顯示在圖上，background圖片屬于背景，文字是可以圖上的。

      學(xué)習(xí)web前端，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對(duì)從零基礎(chǔ)小白到web前端初級(jí)開(kāi)發(fā)工程師，web前端高級(jí)開(kāi)發(fā)工程師，后面的web前端大神級(jí)開(kāi)發(fā)工程師都有一個(gè)明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對(duì)學(xué)習(xí)web前端開(kāi)發(fā)需要掌握的知識(shí)有個(gè)清晰的了解，并快速入門(mén)web前端開(kāi)發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838  加群找群管理領(lǐng)取即可，等你來(lái)哦~~