CSS背景属性

一、背景颜色

 (一)、背景颜色
    属性：background-color
    取值：任何合法颜色或者transparent
    注意：背景颜色会填充到元素的内容区域以及边框区域
 (二)、背景图像
    作用：以图象作为元素的背景
    属性：background-image
    取值：url(背景图像路径)
 (三)、背景重复
    属性：background-pepeat
    取值：
    1.repeat
      默认值，水平垂直方向都平铺
    2.repeat-x
      仅在水平方向平铺
    3.repeat-y
      仅在垂直方向平铺
    4.no-pepeat
      不平铺

二、背景图片尺寸

   属性：background-size
   取值：
     1.value1 value2
       指定背景图像的宽度和高度，以px为单位
     2.value1% value2%
       采用当前元素的框和高的百分比作为背景图像大小
     3.cover
       将背景图像等比放大，直到背景图完全覆盖到元素的所在区域为止
     4.contain
       将背景图等比放大明知道背景图像的下边或者右边有一个边缘碰到元素为止

三、背景图片固定

   属性：background-attachment
   取值：
    1.scroll
     滚动，默认值，背景图会随着文档而滚动
    2.fixed
     固定，背景图不会随着页面文档而发生滚动，一直保持在可视化区域中的固定位置处。

四、图片定位

   作用：
     改变背景图像在元素中的默认设置
   属性：
     background-position
   取值：
     1.x y
       x：背景图像水平偏移距离，取值为正，向右偏移，取值为负，向左偏移
       y：背景图向垂直偏移距离，取值为正，向下偏移，取值为负，向上偏移
     2.x% y%
       0% 0%：背景图在元素的左上角
       50% 50%：背景图在元素的中间
       100% 100%：背景图在元素的右下角
    3.关键字
       x：可以被left/center/right取代
       y：可以被top/center/bottom取代

background-position:center;
	//水平和垂直都在中间位置处
background-position:left top;
	//背景图在左上方
background-position:top right;
	//背景图在右上方

五、CSS Sprites

 雪碧图、精灵图
  作用：
    将一些小的背景图，合并到大的背景道中去，以便实现减少服务器端的请求次数
  步骤：
    1.根据要看的图像大小，创建一个元素
    2.将雪碧图作为元素的背景图，再通过背景图像位置实现位置偏移，将用户要看的图像，显示在元素中。

六、背景属性

	属性：background
	取值：color、url、repeat、attachment、position;
	注意：如果不设置其中的某个值，将采用默认值。