历史版本3 :素材填充方式 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

在仪表板中,设置页面背景、组件边框背景、图片组件和视频组件时,都涉及到素材填充方式的设置。本文将详细说明填充方式的种类及效果。

1.2 功能简介

不同对象可设置的填充方式见下表:

设置对象支持的填充方式
页面背景
适应、填充、拉伸、点九图填充
组件边框背景适应、填充、拉伸、点九图填充
图片组件内容适应、填充、拉伸

2. 普通填充效果

普通填充效果如下表所示:

普通填充方式
说明效果
适应图片宽高比不变,等比拉大/缩小图片,确保宽/高充满页面/组件即可2.jpg
填充图片宽高比不变,图片大小不变,从左上角开始依次用图片填充页面/组件,直到填满1.jpg
拉伸


图片宽度拉伸至页面/组件宽度,图片高度拉伸至页面/组件高度

3.jpg

3. 点九图填充效果编辑

「点九图填充」能够在保持四个角不变的情况下,让边缘和内容区域根据需要进行拉伸,从而在不同设备上保持良好的显示效果。

3.1 设置点九图

1)以设置分页背景为例,使用「自定义上传」,上传图片后,点击「设置点九图」。如下图所示:

Group 1235.png

2)通过拉伸四条线,可以将图片划分为四类区域,如下图所示:

  • 红色区域宽度高度不变

  • 绿色区域高度不变,宽度拉伸,使得图片充满页面宽度

  • 黄色区域宽度不变,高度拉伸,使得图片充满页面高度

  • 蓝色区域高度和宽度拉伸,使得图片充满整个页面

Group 1236.png

3.2 点九图效果

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

4.jpg

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

Group 1237.png