img標(biāo)簽與background屬性插入圖片的差異是什么

本篇內(nèi)容介紹了“img標(biāo)簽與background屬性插入圖片的差異是什么”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

　　img圖片與background的差異

　　小伙伴們都知道在網(wǎng)頁當(dāng)中要插入一張圖片可以使用img，但是有些小伙伴在接觸background之后，容易把這兩個圖片插入方式搞混，那么我們一起來詳細的看一下吧 img是一個html標(biāo)簽，我們想要在網(wǎng)頁中實現(xiàn)圖片的插入，直接在img的屬性src中寫入圖片路徑就可以啦——

　　<img src="img/pic.jpg" alt="">

　　通過background實現(xiàn)插入圖片，background是一個CSS提供的背景屬性，是用來做修飾的，那么我們就需要先寫一個結(jié)構(gòu)，然后通過背景來進行修飾

　　<div class="box"></div>

　　.box{

　　width: 300px;

　　height: 200px;

　　background:url(img/pic2.jpg) no-repeat;

　　}

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

　　<!-- img圖片寫文字 -->

　　<img src="img/pic2.jpg" alt=""><br />

　　睡什么睡，起來嗨!!!

　　<!-- background背景圖片寫文字 -->

　　<div class="box">

　　睡什么睡，起來嗨!!!

　　</div>

　　/* background背景圖片寫文字 */

　　.box{

　　width: 300px;

　　height: 200px;

　　background:url(img/pic2.jpg) no-repeat;

　　font-size: 20px;

　　font-weight: 900;

　　color:crimson;

　　}

“img標(biāo)簽與background屬性插入圖片的差異是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！