背景图样式

背景图样式

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

background-size 属性

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

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

有效参数列表如下：

参数	语义
`contain`	等比例缩放背景图片以完全装入容器，可能容器部分显示空白（仅作为单一参数）
`cover`	等比例缩放背景图片以完全覆盖容器，可能背景图片部分不可见（仅作为单一参数）
`auto`	表示保持原图的尺寸不变
`<length>`	描述图片的具体尺寸，单位：px
`<percent>`	描述图片的尺寸占容器对应方向尺寸的百分比

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

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

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

background-position 属性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%