历史版本3 :素材填充方式 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
目录:
1. 概述编辑
1.1 应用场景
在仪表板中,设置页面背景、组件边框背景、图片组件和视频组件时,都涉及到素材填充方式的设置。本文将详细说明填充方式的种类及效果。
1.2 功能简介
不同对象可设置的填充方式见下表:
| 设置对象 | 支持的填充方式 |
|---|---|
| 页面背景 | 适应、填充、拉伸、点九图填充 |
| 组件边框背景 | 适应、填充、拉伸、点九图填充 |
| 图片组件内容 | 适应、填充、拉伸 |
2. 普通填充效果
普通填充效果如下表所示:
| 普通填充方式 | 说明 | 效果 |
|---|---|---|
| 适应 | 图片宽高比不变,等比拉大/缩小图片,确保宽/高充满页面/组件即可 | ![]() |
| 填充 | 图片宽高比不变,图片大小不变,从左上角开始依次用图片填充页面/组件,直到填满 | ![]() |
| 拉伸 | 图片宽度拉伸至页面/组件宽度,图片高度拉伸至页面/组件高度 | ![]() |
3. 点九图填充效果编辑
「点九图填充」能够在保持四个角不变的情况下,让边缘和内容区域根据需要进行拉伸,从而在不同设备上保持良好的显示效果。
3.1 设置点九图
1)以设置分页背景为例,使用「自定义上传」,上传图片后,点击「设置点九图」。如下图所示:

2)通过拉伸四条线,可以将图片划分为四类区域,如下图所示:
红色区域宽度高度不变
绿色区域高度不变,宽度拉伸,使得图片充满页面宽度
黄色区域宽度不变,高度拉伸,使得图片充满页面高度
蓝色区域高度和宽度拉伸,使得图片充满整个页面

3.2 点九图效果
1)原素材的四个角不变,让边缘和内容区域根据需要进行拉伸。如下图所示:

2)使用「点九图填充」时,可选择 3 种不同的倍数效果,红色区域的宽高会按照倍数调整。如下图所示:





