css里面的背景样式有哪些
1、background的使用非常容易销针，仅仅只需要指定一个颜色即可，低喝
例如：background:green或者background:#ccc
如下例我们将一个宽高均为级喝政200px的div设置一个绿色背景
<div style="width:200px;height:200px;background:green">
</div>
在浏览器中显示如下
1、background-image被用来设置背景图片，指定一个图片url就可以了，例如
background-image:url(/001.png)
如下例中，我们在一个宽高为200px的div中添加一个背景图片
<div style="width:200px;height:200px;background-image:url(./001.png)">
</div>
可以看到这个图片填充了这个div的所有区域
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>
其输出结果如下
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;
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>
其结果输出如下
