当需要往页面组件内添加一个图片作为组件背景的时候，开发者可以对这个图片背景的大小、重复放置的模式、放置位置进行调整，也可以直接添加能自适应的 9-patch 图片。
该属性定义了背景图片的大小。
参数的个数可以是一个或两个。
有效参数列表如下：
| 参数 | 语义 |
|---|---|
contain | 等比例缩放背景图片以完全装入容器，可能容器部分显示空白（仅作为单一参数） |
cover | 等比例缩放背景图片以完全覆盖容器，可能背景图片部分不可见（仅作为单一参数） |
auto | 表示保持原图的尺寸不变。注意，此时原图的尺寸单位为物理分辨率，与手机屏幕分辨率单位一致，非快应用内的1px长 |
<length> | 描述图片的具体尺寸，单位：px |
<percent> | 描述图片的尺寸占容器对应方向尺寸的百分比 |
当参数为两个的时候，第一个参数默认解析为水平轴的宽，第二个参数默认解析为竖直轴的高，如果只有一个参数，则将auto补充为第二个参数，然后按照双参数的规则解析。
无效参数统一解析为默认值auto，即原图尺寸。
1000+该属性定义了背景图片在组件中的重复方式，背景图片可以沿着水平轴、竖直轴、两个轴重复，或者不重复。
参数的个数为一个。
有效参数列表如下：
| 参数 | 语义 |
|---|---|
repeat | 在水平轴和竖直轴上同时重复绘制图片 |
repeat-x | 只在水平轴上重复绘制 |
repeat-y | 只在竖直轴上重复绘制 |
no-repeat | 不会重复绘制图片 |
无效参数会被解析为默认值，即repeat。
<div class="container">
<div class="img"></div>
</div>
<style>
.container {
width: 365px;
height: 365px;
background-color: #c7c7c7;
}
.img {
width: 100%;
height: 100%;
background-image: url('../Common/logo.png');
/* 等比例缩放背景图片到宽度为组件宽的一半 */
background-size: 50%;
/* 在水平方向和竖直方向上重复绘制 */
background-repeat: repeat;
/* 背景图片处于组件中央 */
background-position: center;
}
</style>
.img {
width: 100%;
height: 100%;
background-image: url('../Common/logo.png');
/* 等比例缩放背景图片到宽度为100px */
background-size: 100px;
/* 背景图片不重复绘制 */
background-repeat: no-repeat;
/* 背景图片距离组件左边缘20px，和上下边缘的距离比为3:7 */
background-position: left 20px top 30%;
}
1010+该属性定义了背景图片在组件中的位置。
属性参数的个数可以是 1-4 个。
使用参数描述某个轴方向的位置，有如下两种方式：
第一种方式：位置标识 + 具体数值
位置标识作用是解释后面的具体数值参数表示的位置，这里指的是位置标识对应边缘的相对位置，具体为left、right、top、bottom其中之一。
具体数值指的是以 px 和%结尾的具体数值，即<length>和<percent>类型。
为了方便理解，举两个具体的例子进行说明，如下表：
| 参数 | 描述 |
|---|---|
| left 20px | 图片在水平轴方向上，距离左边缘 20px |
| top 30% | 图片在竖直轴方向上，与上下边缘的距离比例，等于 30%比 70% |
第二种方式：位置参数
位置参数表示一个具体的位置信息，具体为<length>、<percent>、left、right、top、bottom、center其中之一，位置参数可以被解析为一个位置标识加上一个具体数值，对应关系如下表。
| 位置参数 | 位置标识 + 具体数值 |
|---|---|
<length> | 待定位置标识 + <length> |
<percent> | 待定位置标识 + <percent> |
left | left + 0px |
right | right + 0px |
top | top + 0px |
bottom | bottom + 0px |
center | 待定位置标识 + 50% |
从参数的个数来看，可以将有效参数分为四个类型：
一个参数：（位置参数），解析的时候，将center添加到第二个参数，然后作为两个参数解析。
两个参数：（位置参数，位置参数），解析的时候，展开位置参数，扩展为四个参数解析。
三个参数：（位置参数，位置标识，具体数值）或者（位置标识，具体数值，位置参数），解析的时候，展开位置参数，扩展为四个参数解析。
四个参数：（位置标识，具体数值，位置标识，具体数值），需要注意的是，这两个位置标识不能表示同一个轴的方向。
无效参数全部解析为默认值（0px, 0px）,即图片显示在组件的左上角。
查看示例代码
1010+9-patch 图概念来自于 Android，这种图片可以被自适应拉伸，并且能够自定义内容在图片中的展示区域位置。
background-image 属性支持 9-patch 图片，请确保提供名称以”.9.png“结尾的标准 9-patch 图。
图片四周边缘留有 1 像素的信息区域。信息区域底色为透明，黑色标识区域信息，左边缘和上边缘标识图片的拉伸区域，右边缘和下边缘标识图片的内容区域，设置及效果如下图聊天气泡样例所示。
9-patch 图的制作可以借助 Android Studio 来完成。
页面元素额外设置的 padding 属性，会覆盖.9 图携带的 padding 信息。
9-patch 图会导致 background-size 和 background-repeat 属性失效，因为 9-patch 图会自适应铺满组件。
查看示例代码