在網(wǎng)站的開發(fā)中，需要做的事情很多，仔細(xì)到編輯一個字或者一張圖片，而插入圖片的方式有多種，例如用<img>標(biāo)簽、背景圖background。在網(wǎng)站建設(shè)中，圖片是必不可少的，因為有了圖片是網(wǎng)站頁面更加美觀實用，下面列舉一些關(guān)于網(wǎng)站圖片的用途，很常用到的，以此記錄。
當(dāng)用<img>標(biāo)簽的時候，設(shè)置高度和寬度和不設(shè)置在頁面加載的時候圖片的加載會有不一樣的效果，不設(shè)置高度的時候，頁面加載瀏覽器不知道圖片的尺寸就無法為圖片預(yù)留到空間，就可能導(dǎo)致頁面的布局發(fā)生改變，如果設(shè)置高度寬度頁面加載的時候瀏覽器就會為圖片預(yù)留到空間，不影響頁面布局。
<img>標(biāo)簽沒有設(shè)置高度和寬度，無法顯示的時候，就會出現(xiàn)如下圖1的情況，設(shè)置高度寬度的如圖2,，有瀏覽器預(yù)留的空間，也會出現(xiàn)邊框。

 
 
<img>標(biāo)簽添加alt 屬性，當(dāng)圖片不能正常顯示的時候可以作為代替的值顯示，也可以用alt描述關(guān)于圖片的信息，而且添加了alt屬性，當(dāng)圖片無法顯示的時候，瀏覽器顯示的內(nèi)容會比沒有添加alt屬性的要美觀一些，不會出現(xiàn)一個邊框，而是一個替代的文本和一個小點。
 
當(dāng)使用背景圖background的時候，用background-image填寫圖片的路徑，引入背景圖片，用background-repeat設(shè)置是否需要重復(fù)背景圖，一般是默認(rèn)重復(fù)。用background-position設(shè)置背景圖片的位置，用top、bottom、left、right，或者用像素，例如（0px 0px）第一個數(shù)值是水平方向的位移，第二個數(shù)值是垂直方向的位移。用background-size是設(shè)置背景圖片的尺寸大小，可以用background-size : cover; 覆蓋到整個背景區(qū)域，不會改變圖片的比例，但是有時候會裁剪部分圖片，另外background-size : cover; ie7和ie8的兼容可以如下圖

 
background-size : 100%; 是會改變圖片的尺寸比例，可能會變形。background-size也可以用像素，例如background-size：100px 100px;  第一個數(shù)值是代表寬度，第二個數(shù)值是設(shè)置的高度。設(shè)置background-size: contain的時候背景圖片會等比縮放到可以全部在容器里顯示，可能會出現(xiàn)留有空白的地方。