在网站的□□开发中，需要做的□□□□事情很多，仔细到编□□□□辑一个字□□□□或者一张□□□图片，而插入图□□片的方式□□□有多种，例如用<img>标签、背景图background。在网站建□□□设中，图片是必□□□□不可少的，因为有了□□□□图片是网□□站页面更□□加美观实□□□□用，下面列举□□□一些关于◆网站图片□□的用途，很常用到□□□□的，以此记录。
当用<img>标签的时□□候，设置高度□□和宽度和□□□□不设置在□□□□页面加载□□□□的时候图♦片的加载□□□会有不一□□□样的效果，不设置高□□度的时候，页面加载□□□浏览器不☆知道图片·的尺寸就□□□无法为图□□□□片预留到□□□□空间，就可能导◇致页面的□□□□布局发生□□□□改变，如果设置◉高度宽度□□□□页面加载□□的时候浏□□览器就会□□□□为图片预□□留到空间，不影响页★面布局。
<img>标签没有★设置高度□□和宽度，无法显示□□□□的时候，就会出现□□如下图1的情况，设置高度☆宽度的如□□图2,，有浏览器□□□预留的空□□□□间，也会出现□□□边框。

 
 
<img>标签添加alt 属性，当图片不□□□□能正常显□□□□示的时候□□□□可以作为▼代替的值◈显示，也可以用alt描述关于□□图片的信□□□□息，而且添加□□了alt属性，当图片无●法显示的□□□□时候，浏览器显□□□□示的内容□□□□会比没有□□添加alt属性的要☆美观一些，不会出现□□一个边框，而是一个◣替代的文□□本和一个◤小点。
 
当使用背□□景图background的时候，用background-image填写图片□□□的路径，引入背景❖图片，用background-repeat设置是否□□□□需要重复▼背景图，一般是默○认重复。用background-position设置背景□□图片的位□□置，用top、bottom、left、right，或者用像□□□□素，例如（0px 0px）第一个数□□值是水平□□□□方向的位□□□移，第二个数◉值是垂直□□方向的位丨移。用background-size是设置背□□□□景图片的◎尺寸大小，可以用background-size : cover; 覆盖到整○个背景区□□□域，不会改变□□□图片的比□□□例，但是有时□□候会裁剪□□部分图片，另外background-size : cover; ie7和ie8的兼容可☆以如下图

 
background-size : 100%; 是会改变◉图片的尺□□□寸比例，可能会变◥形。background-size也可以用□□□□像素，例如background-size：100px 100px;  第一个数△值是代表○宽度，第二个数□□值是设置◤的高度。设置background-size: contain的时候背□□景图片会□□□□等比缩放□□到可以全□□部在容器□□□□里显示，可能会出□□现留有空□□□□白的地方。