快应用 背景图样式

2020-08-08 11:45 更新

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

background-size 属性

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

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

有效参数列表如下:

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

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

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

background-repeat 属性

该属性定义了背景图片在组件中的重复方式,背景图片可以沿着水平轴、竖直轴、两个轴重复,或者不重复。

参数的个数为一个。

有效参数列表如下:

参数 语义
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>

background-image1

.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-image2

background-position 属性

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

属性参数的个数可以是 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),即图片显示在组件的左上角。

background-position   示例代码

查看 示例代码

9-patch 图支持 

9-patch 图概念来自于 Android,这种图片可以被自适应拉伸,并且能够自定义内容在图片中的展示区域位置。

background-image 属性支持 9-patch 图片,请确保提供名称以”.9.png“结尾的标准 9-patch 图。

图片四周边缘留有 1 像素的信息区域。信息区域底色为透明,黑色标识区域信息,左边缘和上边缘标识图片的拉伸区域,右边缘和下边缘标识图片的内容区域,设置及效果如下图聊天气泡样例所示。

9-patch

9-patch 图的制作可以借助 Android Studio 来完成。

页面元素额外设置的 padding 属性,会覆盖.9 图携带的 padding 信息。

9-patch 图会导致 background-size 和 background-repeat 属性失效,因为 9-patch 图会自适应铺满组件。

9-patch   示例代码

查看 示例代码


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号