background-image屬性值
url()中可以寫絕對路徑，也可以寫相對路徑，甚至也可以寫其他域名下的圖檔資源。url()中的路徑加不加引号都可以。
絕對路徑寫法：
background-image:url("/imgs/1.jpg");
//或
background-image:url(/imgs/1.jpg);
相對路徑寫法：
background-image:url(“../imgs/1.jpg”);
//或
background-image:url(../imgs/1.jpg);
img定義和用法
img 元素向網頁中嵌入一幅圖像。
請注意，從技術上講，<img> 标簽并不會在網頁中插入圖像，而是從網頁上連結圖像。<img> 标簽建立的是被引用圖像的占位空間。
<img> 标簽有兩個必需的屬性：src 屬性 和 alt 屬性。
差別
- 浏覽器上下文的差別
使用div+background-image實作圖檔顯示的時候，該塊級元素的上下文為普通的塊級上下文
而使用img顯示圖檔的時候，上下文為img上下文，可以對圖檔進行另存為等操作。
- 塊大小對圖檔顯示的差別
下面例子中，img和div的大小為600px*350px， 圖檔大小為128px*128px
div+background-image的預設樣式如下圖所示
預設樣式有幾個注意點
- 當原始圖檔比設定的寬高小，會在塊中重複顯示以鋪滿塊。
- 當原始圖檔比設定的寬高大，圖檔會在塊中截斷。
div+background-image可以通過backgroung-size， background-rpest， background-position， background-origin， background-clip 等CSS樣式來調整顯示的樣式，當然也可以調整為和img的預設樣式一樣
div{
background-size: 600px 350px;
}
div+background-image通過幾種樣式的組合可以調整出各種各樣的顯示效果，
使用img标簽顯示圖檔的話，圖檔實際顯示的寬高就是設定的寬高，沒有别的辦法來設定顯示的樣式，可以看出一旦設定的寬高比和原來圖檔的寬高比不一緻，顯示出的圖檔就會有拉伸的現象。
但當你隻設定寬或隻設定高，高或者寬就會按照原來的寬高比自動設定。
選擇
- 選擇div+background-image的情況
根據div+background-image的特性可以得出選擇使用這種方法實作顯示圖檔的情況
- 圖檔用來當作塊的背景的情況，這也是這種方法最原始的用法
- 由于這種方法的上下文是普通的塊級上下文，沒有圖檔另存為等操作，是以可以用于不希望使用者能輕易儲存圖檔的情況
- 可以用于寬高給定的同時不希望圖檔拉伸且允許圖檔截斷的情況
- 選擇img标簽的情況
img是一個語義化标簽，在剛接觸html+css的時候肯定有接觸到語義化的概念以及漸進增強的概念，雖然現在的前端都不太注重漸進增強，但選用img标簽能很好的适應語義化和漸進增強。選用它的情況如下
- 有明确的語義化要求的情況下選用img标簽
- 圖檔是頁面的組成部分而不是修飾部分的時候選用img标簽
- 顯示圖檔隻給定寬或高且不能截斷圖檔并要保證圖檔寬高比的情況下選用img标簽
————————————————
版權聲明：本文為CSDN部落客「若即」的原創文章，遵循 CC 4.0 BY-SA 版權協定，轉載請附上原文出處連結及本聲明。
原文連結：https://blog.csdn.net/qq_17004327/article/details/78264763