背景定位&背景尺寸

• background-position
• background-size

Background-position

1- 定义、属性&属性值

指的是背景图在元素中的位置
【语法】
属性名: 
      background-position
属性值:  
       (1) x  y : x-水平偏移位置 y-垂直偏移位置
               x 为正 ，向右移动
               x 为负 ，向左移动
               y 为正 ，向下移动
               y 为负 ，向上移动
      (2) x% y% : 相对于所在的元素的宽度和高度来设置 相对比例
               多数用于背景图像居中显示
       (3)left
          right
          center
          top
          bottom

2- 语法解释

举几组例子说明：
background-position:0 0；默认为所在元素左上角
background-position:-50px -100px;向左偏移50px，向上偏移100px
background-position:50% 50%;背景图向右偏移量为所在元素宽度的50%，向下偏移量为所在元素高度的50%
background-position:center center;背景图片位于所在元素的中心
background-position:left center;背景图片从左中处开始向右平铺
background-position:center top;背景图片从上中处开始向下平铺

Background-size

1- 定义、属性&属性值

设置背景图片的宽度和高度
【语法】
属性名: 
      background-size
属性值:  
      auto auto,为默认值
      长度length和百分比percentage。 
      (1)value1 value2; 
      (2)value1%  value2%;
      (3)cover;
      (4)contain;

2- 语法解释

1、value1 value2;

给定正的length值来调整背景图片大小。
第一个值为设置背景图宽度，第二个值为背景图的高度；
假如只给定一个值，那么第二个自动的为 'auto'；
ex:
background-size: auto;
background-size: 4em;
background-size: 100px;
background-size: 200px 100px;
background-size: auto 100px;

2、value1% value2%;

给定正的百分比来调整背景图片大小。
背景图大小是根据相对的背景区域来做调整，背景相对区域就是初始的包含块。
假如只给定一个值，那么第二个自动的为 'auto'；
ex:
background-size: 50%;
background-size: 50% 50%;
background-size: auto 50%;
background-size：100% 100%，背景图片铺满整个内容区

3、cover；

覆盖
按比例调整背景图片
所有的边都已经覆盖到元素的边缘时才停止缩放。
有可能图片显示不完整。

4、contain;

包含
按比例调整背景图片
只要有一条边覆盖到元素的边缘上就停止缩放。
图片一定会完整的显示在背景中，有可能不会覆盖到所有的区域。