background-position
- 版本：CSS1/3
- 2018.3.14
语法：
background-position：<position> [ , <position> ]*
<position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
默认值：0% 0%，效果等同于left top
适用于：所有元素
继承性：无
动画性：是
计算值：指定值
媒 体：视觉
取值：
- <percentage>：
- 用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
- <length>：
- 用长度值指定背景图像在元素中出现的位置。可以为负值。
- center：
- 背景图像横向或纵向居中。
- left：
- 背景图像从元素左边开始出现。
- right：
- 背景图像从元素右边开始出现。
- top：
- 背景图像从元素顶部开始出现。
- bottom：
- 背景图像从元素底部开始出现。
说明：
指定背景图像在元素中出现的位置。
- 该属性接受
1~4个参数值。 -
如果提供三或四个，每个 <percentage> 或 <length> 偏移量之前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。
示例：假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px你也可以设置3个参数值：缩写方式：
background: url(test1.jpg) no-repeat right 20px bottom 20px;拆分方式：
background: url(test1.jpg) no-repeat left bottom 10px;要注意的是：设置3个或4个值，偏移量前必须有边界关键字。也就是说，形如：
10px bottom 20px，这样的参数设置是错误的，因为10px前面没有关键字。 - 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
- 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。
- 对应的脚本特性为：backgroundPosition。
兼容性：
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
- 灰色 = 未知
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 8.0+ | 40.0+ | 40.0+ | 8.0+ | 40.0+ | 8.0+ | 4.4+ | 28.0+ |
| 3~4个参数 Multiple background position |
8.0 | |||||||
| 9.0+ |
