背景
在 屏幕设置 下的 Fill 面板中,可以为任意屏幕设置背景。面板中的每个图层可以是纯色、渐变、图片或视频,屏幕可以叠加多个图层——这也是为图片或视频添加色调的实现方式。
背景也可以作为主视觉图片使用。要实现这个效果,请将内容放在滑动卡片中。
图片

上传 .JPG、.PNG 或 .WEBP 格式的文件,大小不超过 20 MB。图片会缩放以覆盖整个背景。
背景图片和视频会填充整个视口,包括刘海和系统栏后面的区域——即使启用了安全区域也是如此。请将重要内容远离边缘,以免被裁切。
如需在运行时通过应用代码动态替换背景图片,请启用自定义媒体 ID。
视频

上传 .MP4 或 .WEBM 格式的文件,大小不超过 50 MB。预览区显示的是静态帧,但视频在设备上运行时会正常播放。
开启 Loop 可让视频循环播放。
如需在运行时动态替换背景视频,请启用自定义媒体 ID。
纯色

输入六位十六进制值(如 #FFFFFF),并将不透明度设置为 0 到 100%。使用缩写值会导致发布失败。从色板中选择已保存的颜色样式来应用品牌色——背景会自动跟随浅色和深色主题切换。
渐变

构建多节点线性渐变:
- Direction — 将渐变方向旋转 0 到 360°。
- Stops — 沿色条拖动以调整位置。点击某个节点可编辑其六位十六进制颜色值和不透明度。
- Opacity — 图层行上的滑块可同时缩放所有节点的透明度,保持节点间的渐变效果不变。
将背景用作主图
主要文章:滑动面板
在流程中,你可以通过屏幕背景和滑动面板来构建主图效果。面板覆盖屏幕下半部分,随着用户滚动逐渐上移并遮盖背景。
-
将屏幕的填充设置为图片或视频,然后上传主图。
-
添加一个滑动浮层: > Layout > Sliding sheet。
-
设置浮层的Start position——即浮层从底部向上覆盖屏幕的比例。默认值为 55%,此时背景从顶部 45% 处透出。
-
在滑动弹层中添加内容。
-
若要在主图上叠加标题或 Logo,请将这些元素放在弹层之外。它们会渲染在屏幕背景上方。
-
如有需要,可调整 Start position 来改变弹层的大小。此元素不支持设置绝对高度。
为背景添加色调
文字叠放在图片或视频上时,只有当背景足够深时才能清晰可读。为了使背景更均匀,可以在媒体上方叠加一个半透明图层:
- 在 Screen settings 中,将 Fill 图层设置为您的图片或视频。
- 要添加第二个图层,点击 Fill 旁边的 。新图层会出现在列表顶部,覆盖在媒体内容之上。
- 点击图层的色块,选择 Gradient 。若只想加深文字所在边缘的区域,可将渐变设置为从该边缘的不透明色标渐变至另一侧的透明色标。
- 拖动图层行上的滑块,调整着色的强度。
拖动图层可调整其在堆叠中的位置,点击 可将其移除。