使用css设计网页时，可以通过background(背景色)，background-image（背景图片）,background-repeat（背景重复方向）,background-position（背景位置）,background-size(背景图片大小)这几个属性对图片的背景进行灵活的设置
工具/原料
editplus
background的使用
1、background的使用非常容易，仅仅只需要指定一个颜色即可，例如：background:green或者background:#ccc如下例我们将一个宽高均为200px的div设置一个绿色背景<div style="width:200px;height:200px;background:green"> </div>在浏览器中显示如下
background-image的使用
1、background-image被用来设置背景图片，指定一个图片url就可以了，例如background-image:url(/001.png)如下例中，我们在一个宽高为200px的div中添加一个背景图片<div style="width:200px;height:200px;background-image:url(./001.png)"> </div>可以看到这个图片填充了这个div的所有区域
background-repeat的使用
1、background-repeat通常和背景图片一起使用，background-repeat共有三个值，这三个值分别是no-repeat，repeat-x,repeat-y,其中no-repeat不平铺，也就是我们背景图片里的单个图片，repeat-x，向x轴方向平铺，repeat-y向y轴方向平铺，如下我们给一个背景图片添加一个x轴方向的平铺<div style="width:200px;height:200px; background-image:url(./001.png); background-repeat:repeat-x"> </div>其输出结果如下
background-position的使用
1、background-position通常使用在no-repeat的背景图片中设置背景图片的位置，在x和y都平铺的背景图片中是没有任何意义的，在设置background-position时通常需要设置两个值，第一个值表示距离左边的距离，第二个值表示距离上面的距离，例如下面，为了看出效果我加了个边框 <div style="width:200px;height:200px; border:2px solid #ccc; background-image:url(./001.png); background-repeat:no-repeat; background-position:20px 50px"> </div>这样就可以很直观的看出背景图片距离左边20px，距离上边50px;
background-size的使用
1、background-size被用来设置背景图片的大小，用于图片的放大和缩小，在设置background-size时通常需要设置2个值，这两个值可以是固定的像素或者是百分比（注意这个百分比是容器的百分比)，例如我希望设置背景图片填满整个容器，那么可以这么设置background-size:100% 100%以下div演示一个将背景图片设置成50%大小 <div style="width:200px;height:200px; border:2px solid #ccc; background-image:url(./001.png); background-repeat:no-repeat; background-position:20px 50px; background-size:50% 150%"> </div>其结果输出如下
