素材填充方式

1. 概述

1.1 应用场景

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

1.2 功能简介

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

设置对象

支持的填充方式

页面背景

适应、填充、拉伸、点九图填充

组件边框背景

适应、填充、拉伸、点九图填充

图片组件内容

适应、填充、拉伸

2. 普通填充效果

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

普通填充方式

说明

效果

适应

图片宽高比不变,等比拉大/缩小图片,确保宽/高充满页面/组件即可

填充

图片宽高比不变,图片大小不变,从左上角开始依次用图片填充页面/组件,直到填满

拉伸

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

3. 点九图填充效果

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

3.1 设置点九图

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

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

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

3.2 点九图效果

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

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

文档内容是否对您有帮助?
有帮助
没帮助没帮助
如需获取即时帮助,请联系技术支持
咨询
扫码领取100+零代码资料简道云官方微信号400-111-0890
图标在线咨询
立即体验