使用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-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-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>其结果输出如下
