一、background-position

1.关键字定位

  当使用关键字的时候，关键字的顺序是无关的，即background-position: center top 和 background-postion: top center 是等价的。

    

2.百分百比或者具体的长度单位时

设置 background-position 的同时还需要设置 background-size ， 将单位都转换为 rem px em， 可以准确的显示出图标，不会出现对不准的情况。

当使用百分百定位时，百分百是相对于它的父元素来说的。

    

3.同时使用坐标和关键字

 在新的 CSS 语法中又多了一种用法，这种用法是相对于容器的边，形式如下：

background-position: right 10px top 20px，这种语法表示背景距右边 10px，距上边 20px。

但是，这种写法的兼容性并不好，很多浏览器还不支持。如果不考虑 IE8，可以采用这种方式。如果要考虑 IE8 的话，要么给容器定宽，计算出具体的 x 和 y 的值，要么，使用百分比来大约的定位。

    

二、background-size

这个属性，是用来控制背景图片尺寸的。它也有几种用法：

1. 直接使用css单位如px,rem等，形如：background-size:10px 20px;第一个数值用来确定宽度，第二个值用来确定高度。

2. 使用百分比与使用单位类似，是以父元素为基准。

3. 关键词cover,background-size:cover;顾名思义，这个属性会让背景图片完全覆盖元素空间。我们可以这样理解，将一张图片等比例放大，直到这张图片能够完全将元素空间完全覆盖时，就是此时cover定义的背景尺寸了。

4. 关键词contain，background-size:contain;contain属性与cover不同，仍然是等比例拉大背景图片但是，contain属性是在图片的宽度或者高度其中之一和元素的宽度和高度一致时，此时的尺寸就是背景的尺寸也就是说，图片会被放大到容器能够完全显示它的最大尺寸。