10 CSS背景

背景
   显示背景用背景属性
   所有背景属性都不能继承
1 背景色
     background-color

2 背景图
      background-image: url(img/hebe.jpg);
      background-repeat: no-repeat;  //图片不重复
  
3 背景重复
     background-repeat: no-repeat;  都不平铺
     background-repeat: repeat-y; //图片沿x轴重复
     background-repeat: repeat-x;//图片沿y轴重复

4 背景定位（移动背景图）
     background-position: 200px 200px;//距离左边200px，距离上边200px。
	 background-position: 200px;//如果只有一个值，则高度默认是50%。
     background-position: 50% 50%;第一个表示宽，第二个表示高//百分比（剩以父亲的宽高），像素，left、right、center、top、button
	    （元素的宽-图片的宽）*50%  宽偏移的距离
	    （元素的高-图片的高）*50%  高偏移的距离

     最大的用处：css sprite css雪碧技术或css精灵
	 精灵图就是把背景图上下移动来展示图标
	 

5 背景固定
    background-attachment：fixed
	固定背景图，不随滚动条滚动

6 设置背景图片大小
	设置背景图片尺寸	
	background-size：100px  100px；设置图片的宽高，在100*100方框中能看到完整的图
	background-size：100px； 设置图片宽度为100px，高度根据原图的宽高比例，得到设置后的高度	
	background-size：20%； 参照物是本元素，图片宽度是本元素的20%，得出图片宽度，然后根据原图的宽高比例，得到设置后的高度

CSS3 background-origin 属性
	background-origin 属性规定背景图片的定位区域。
	背景图片可以放置于 content-box、padding-box 或 border-box 区域。

CSS3 多重背景图片
	允许您为元素使用多个背景图像。
	background-image:url(bg_flower.gif),url(bg_flower_2.gif);

注意：background简写，上面不要写background单一属性，会覆盖。