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

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

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