快应用 背景图样式

当需要往页面组件内添加一个图片作为组件背景的时候，开发者可以对这个图片背景的大小、重复放置的模式、放置位置进行调整，也可以直接添加能自适应的 9-patch 图片。

background-size 属性

该属性定义了背景图片的大小。

参数的个数可以是一个或两个。

有效参数列表如下：

当参数为两个的时候，第一个参数默认解析为水平轴的宽，第二个参数默认解析为竖直轴的高，如果只有一个参数，则将​auto​补充为第二个参数，然后按照双参数的规则解析。

无效参数统一解析为默认值​auto​，即原图尺寸。

background-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%;
}

background-position 属性

该属性定义了背景图片在组件中的位置。

属性参数的个数可以是 1-4 个。

使用参数描述某个轴方向的位置，有如下两种方式：

第一种方式：位置标识 + 具体数值

位置标识作用是解释后面的具体数值参数表示的位置，这里指的是位置标识对应边缘的相对位置，具体为left、right、top、bottom其中之一。

具体数值指的是以 px 和%结尾的具体数值，即<length>和<percent>类型。

为了方便理解，举两个具体的例子进行说明，如下表：

第二种方式：位置参数

位置参数表示一个具体的位置信息，具体为​<length>​、​<percent>​、​left​、​right​、​top​、​bottom​、​center​其中之一，位置参数可以被解析为一个位置标识加上一个具体数值，对应关系如下表。

从参数的个数来看，可以将有效参数分为四个类型：

一个参数：（位置参数），解析的时候，将center添加到第二个参数，然后作为两个参数解析。

两个参数：（位置参数，位置参数），解析的时候，展开位置参数，扩展为四个参数解析。

三个参数：（位置参数，位置标识，具体数值）或者（位置标识，具体数值，位置参数），解析的时候，展开位置参数，扩展为四个参数解析。

四个参数：（位置标识，具体数值，位置标识，具体数值），需要注意的是，这两个位置标识不能表示同一个轴的方向。

无效参数全部解析为默认值（0px, 0px）,即图片显示在组件的左上角。

background-position   示例代码

查看 示例代码

9-patch 图支持 

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 图会自适应铺满组件。

9-patch   示例代码

查看 示例代码